I've encountered an issue where default objects sharing the same state are causing binding problems, making it difficult to separate them. Each instance needs its own independent state management. Both parent and child components exchange data and interact directly with the store.
The problem arises when clicking the 'Add' button in the parent component, creating a new row in the child component and adding default objects (el-input and el-select) to an array. Subsequently, all elements end up with the same shared state instead of being independent.
I'm utilizing Vue 3, Pinia for store management, and Element Plus for UI components.
Parent Component -
<template>
... Parent component code here ...
</template>
<script lang="ts" setup>
... Script for parent component here ...
</script>
Child Component -
<template>
... Child component code here ...
</template>
<script lang="ts" setup>
... Script for child component here ...
</script>
Store Management -
import { defineStore } from "pinia";
... Store definition and actions here ...