为什么我的 vue 组件不重新渲染？

Question

I have a question why not this component, not re-rendering after changing value so what I'm trying to do is a dynamic filter like amazon using the only checkboxes so let's see I have 4 components [ App.vue, test-filter.vue, filtersInputs.vue, checkboxs.vue]

Here is code sandbox for my example please check the console you will see the value changing https://codesandbox.io/s/thirsty-varahamihira-nhgex?file=/src/test-filter/index.vue

the first component is App.vue;

<template>
  <div id="app">
    <h1>Filter</h1>
     {{ test }}
    <test-filter :filters="filters" :value="test"></test-filter>
  </div>
</template>

<script>
   import testFilter from "./test-filter";
   import filters from "./filters";
   export default {
      name: "App",
      components: {
         testFilter,
      },
      data() {
          return {
              filters: filters,
              test: {},
           };
      },
   };
</script>

so App.vue that holds the filter component and the test value that I want to display and the filters data is dummy data that hold array of objects. in my test-filter component, I loop throw the filters props and the filterInputs component output the input I want in this case the checkboxes.

test-filter.vue

<template>
 <div class="test-filter">
  <div
     class="test-filter__filter-holder"
       v-for="filter in filters"
       :key="filter.id"
  >
  <p class="test-filter__title">
    {{ filter.title }}
  </p>
  <filter-inputs
    :value="value"
    :filterType="filter.filter_type"
    :options="filter.options"
    @checkboxChanged="checkboxChanged"
  ></filter-inputs>
 </div>
</div>
<template>
<script>
  import filterInputs from "./filterInputs";
   export default {
      name: "test-filter",
      components: {
         filterInputs,
      },
     props:{
         filters: {
          type: Array,
          default: () => [],
         },
         value: {
          type: Array,
          default: () => ({}),
         },
     },
     methods:{ 
        checkboxChanged(value){
           // Check if there is a array in checkbox key if not asssign an new array.
             if (!this.value.checkbox) {
                 this.value.checkbox = [];
             }
             this.value.checkbox.push(value)
         }
     };
 </script>

so I need to understand why changing the props value also change to the parent component and in this case the App.vue and I tried to emit the value to the App.vue also the component didn't re-render but if I check the vue dev tool I see the value changed but not in the DOM in {{ test }}. so I will not be boring you with more code the filterInputs.vue holds child component called checkboxes and from that, I emit the value of selected checkbox from the checkboxes.vue to the filterInputs.vue to the test-filter.vue and every component has the value as props and that it if you want to take a look the rest of components I will be glad if you Did.

filterInpust.vue

<template>
 <div>
  <check-box
    v-if="filterType == checkboxName"
    :options="options"
    :value="value"
    @checkboxChanged="checkboxChanged"
    ></check-box>
  </div>
</template>
<script>
  export default {
      props: {
        value: {
           type: Object,
           default: () => ({}),
        },
        options: {
           type: Array,
           default: () => [],
      },
     methods: {
       checkboxChanged(value) {
          this.$emit("checkboxChanged", value);
        },
     },
  }
</script>

checkboxes.vue

<template>
 <div>
  <div
    v-for="checkbox in options"
   :key="checkbox.id"
   >
  <input
    type="checkbox"
    :id="`id_${_uid}${checkbox.id}`"
    @change="checkboxChange"
    :value="checkbox"
   />
     <label
      :for="`id_${_uid}${checkbox.id}`"
     >
     {{ checkbox.title }}
    </label>
   </div>
 </div>
<template>
<script>
  export default {
     props: {
       value: {
          type: Object,
          default: () => ({}),
       },
       options: {
          type: Array,
          default: () => [],
       },
     }
     methods: {
       checkboxChange(event) {
         this.$emit("checkboxChanged", event.target.value);
       },
    },
  };
  </script>

Answer 1

I found the solution As I said in the comments the problem was that I'm not using v-model in my checkbox input Vue is a really great framework the problem wasn't in the depth, I test the v-model in my checkbox input and I found it re-render the component after I select any checkbox so I search more and found this article and inside of it explained how we can implement v-model in the custom component so that was the solution to my problem and also I update my codeSandbox Example if you want to check it out.

Big Thaks to all who supported me to found the solution: sarkiroka, Jakub A Suplick