[Vuejs]-Getting warning when using components recursively in VueJS

The error is saying that changes to the param i passed as the v-model for your <item> component won’t be reflected in the items property. This is because i is just an alias for the item and not the actual item.

If you don’t need items to update when the model for each <item> component changes, then you don’t need to worry. But you probably do want items to update since you’re passing each element in items as a v-model.

In order to properly reference each item and avoid this warning, you can access each element in the array of items using the index. Like so:

<item v-for="(item, index) in items" v-model="items[index]"></item>

You should worry, because you will not be able to use i bind to the model in other contexts, like watchers, or filters, etc.

This is not a good practice and the warning is valid.

Please consider creating an array in your data and add the your data to it as objects then do the v-for and binding. it is much safer.

I had a similar warning before and I could not deal with variables because they were considered local as the warning