Code working in Vue3 Playground but not in Inertia Environment

[philharmonie]

Version:

• @inertiajs/vue3 version: ^1.0.0

Describe the problem:

I have a very simple code that is working in a plain vue3 playground:

// App.vue
<script setup>
import { reactive } from 'vue'
import Child from './Child.vue'

const data = reactive({
  assets: [
    {
      id: 1,
      name: 'Foo'
    },
    {
      id: 2,
      name: 'Bar'
    },
  ]
})

const handleNewAsset = (newAssets) => {
  data.assets = newAssets
}
</script>

<template>
  <Child :assets="data.assets" @update:assets="handleNewAsset" />
</template>

// Child.vue
<script setup>
import {ref} from 'vue'

const {assets} = defineProps({
  assets: {
    type: Array
  }
})
const emit = defineEmits(['update:assets'])

const newName = ref('')

const add = () => {
  assets.push({
    id: assets.length + 1,
    name: newName.value
  })
}

const remove = (object) => emit('update:assets', assets.filter(asset => asset.id !== object.id))

</script>

<template>
  <h1>Assets</h1>
  <ul>
    <li v-for="asset in assets" :key="asset.id"><strong>id:</strong> {{asset.id}} <strong>name:</strong> {{asset.name}} <button @click="remove(asset)">x</button></li>
  </ul>
  <input v-model="newName" />
  <button @click="add">Add</button>
</template>

(You can find it here )

The exact same code is not working in an inertia environment. If you remove an assets from the list, in Inertia items are not removing.

Steps to reproduce:

• laravel new bug
• cd bug
• open resources/js/Pages/Welcome.vue
• replace the content of Welcome.vue with the code from App.vue
• adjust the import import Child from '@/Pages/Child.vue'
• create a new file resources/js/Pages/Child.vue
• paste the content of Child.vue to it

Now add items and remove items. In the playground the code is working as expected. In Inertia the behavior is not working