[Bug]: Custom Field Component Not Rendering - Shows as Plain Div

[swarakaka]

Description

Description
Custom field components are not rendering properly. Instead of the Vue component being mounted, the field renders as a plain

with all props as HTML attributes.

Steps to Reproduce

1. Create custom field PHP class:

<?php

namespace App\Forms\Components;

use Laravilt\Forms\Components\Field;

class TranslatableField extends Field
{
    protected string $view = 'forms.components.translatable-field';

    public function getValue(): mixed
    {
        $value = parent::getValue();

        if (is_string($value)) {
            $decoded = json_decode($value, true);
            return $decoded ?? $value;
        }

        return $value;
    }
}

2. Create Blade view at resources/views/forms/components/translatable-field.blade.php:

@props(['component'])

@php
    $props = $component->toLaraviltProps();
@endphp

<x-laravilt-vue-component
    component="TranslatableField"
    :props="$props"
/>

3. Create Vue component at resources/js/components/forms/TranslatableField.vue:

<script setup lang="ts">
import { Input } from '@/components/ui/input';

defineProps<{
    modelValue?: string;
    label?: string;
    errors?: string[];
    helperText?: string;
    required?: boolean;
    disabled?: boolean;
}>();

defineEmits<{
    (e: 'update:modelValue', value: string): void;
}>();
</script>

<template>
    <laravilt-field-wrapper
        :label="label"
        :errors="errors"
        :helper-text="helperText"
        :required="required"
    >
        <Input
            type="text"
            :value="modelValue"
            @input="$emit('update:modelValue', $event.target.value)"
            :disabled="disabled"
        />
    </laravilt-field-wrapper>
</template>

4. Register component in resources/js/composables/useFormComponents.ts:

import TranslatableField from '@/components/customizes/TranslatableField.vue'

export const formComponents = {
    'translatable-field': TranslatableField,
}

5. Use the field:

TranslatableField::make('name')
    ->label('Name')
    ->required()

Expected Behavior

The Vue component should render with the field wrapper and input.

Actual Behavior

The field renders as a plain

with all props as HTML attributes:

Package Version

1.0

PHP Version

8.4

Laravel Version

12.50.0