I am facing a peculiar issue that I can't seem to resolve. The testArray is expected to update its value from 'This is a test' to the array in ItemList, and it does so. However, it seems to be updating itself with a delay - when I change the emit to ('response', items), it doesn't work as expected. But, when I replace 'items' with 'test', it displays the array correctly.
Any assistance on this matter would be greatly appreciated!
App.vue
<script setup>
import ItemList from "./components/ItemList.vue";
import {ref} from "vue";
const testArray = ref('This is a test')
</script>
<template>
<ItemList @response="(msg) => testArray = msg" />
<ul>
<li v-for="item in testArray" :key="item.id">
{{item.name}}
</li>
</ul>
</template>
ItemList.vue
<script setup>
import {ref} from "vue";
const items = ref([
{id: 1, name: 'SomeRandomName'},
{id: 2, name: 'SomeRandomName'},
{id: 3, name: 'SomeRandomName'},
])
const test = ref(['Something'])
const emit = defineEmits(['response'])
emit('response', items)
</script>
<template>
</template>