vue 🚀
laravel 🚀
VueJS and sharing modelValue state with a Component

Thanks to the code that comes with Laravel Jetstream we have examples of components that can be easily used in multiple forms.

For example I can use the shared Label, Input, InputError

<div class="col-span-6">
  <Label for="password" value="Password"/>
	<Input id="password" type="text"
	  class="mt-1 block w-full"
	  placeholder="leave empty to not update"
  <InputError class="mt-2" :message="form.errors['user.password']"/>

And get all the updates in the component I am using it in. Looking into the shared component, Input in this example.

<script setup>
import { onMounted, ref } from 'vue';

    modelValue: String,


const input = ref(null);

onMounted(() => {
    if (input.value.hasAttribute('autofocus')) {

defineExpose({ focus: () => input.value.focus() });

        class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"
        @input="$emit('update:modelValue', $"

Which means my component Edit.vue which has form.user.password will get updated as the person types into the field of the child component.

Here is another example of a select list:

        @change="$emit('update:modelValue', $"
        <option v-for="option in options" :for=""
            {{ }}

export default {
    name: "TeamSelect",
    props: {
        modelValue: String,
        options: Object


<style scoped>


It is using the modelValue shared state that can then be emitted on change. This is seen in the VueJs docs here and in a good Laracast Videos here