Mutating props when it's an array and is assigned to a REF.

[re2005]

I'm a bit confusing with this behaviour, so decided to ask for some help.

The scenario is: We have two components parent and child.
Normally if you try to mutate the prop you get an warning from Vue to avoid props mutation.

But what happens when you assign a prop to a local ref and than mutate the ref and that will also mutate the prop

Parent component

<template>
    I'm parent

    <ChildComponent :some-var="someVar" />
</template>
<script>
    const someVar = ref(['testVar1', 'testVar2']);
</script>

Child component

<template>
    I'm child

    {{ props.someVar }}
    {{ someChildVar }}

    <div v-for="(t, i) in someChildVar">
        <input v-model="someChildVar[i]" />
    </div>
</template>

<script>
    const props = defineProps<{ someVar: [] }>();
    const someChildVar = ref(props.someVar);
</script>

So pretty much this will mutate the prop without any warning and this is probably a anti-pattern ?
Has todo with how the reactivity works behind the scenes.

[chenxch]

vue's responsive is reflected in the data update triggering the view update, vue3's responsive is achieved through proxy, single data from the parent component through the props to the child component, this data is taken off proxy, you can print props.someVar within the child component, you will find that it is not a proxy object, but a ordinary object, due to the object memory characteristics of js, it is the same object as the original object of the parent component, the data can be updated, but the view is not updated. (The object type is special, also on vue2, you can do Object.assign(props.someVar, {...}) You can also bypass vue's warn by modifying the object in props.