title: Remove checkbox items from anywhere in an array
body: <p>Suppose I have a parent checkbox and under this I have four child checkboxes. For example-</p>
  <p>-Animals
  -Cat
  -Dog
  -Squirrel
  -Lion</p>
  <p>If I select the parent, then all the childs will be selected. If I deselect all the child, the parent will be unselected. If I select only one child then also the parent will be selected. How to implement this in vue.js ?</p>
  <p><strong>json:</strong></p>
  <pre><code>{
    &quot;id&quot;: 266,
    &quot;parent_id&quot;: 0,
    &quot;menu_name&quot;: &quot;Server &amp;&amp; DB Info&quot;,
    &quot;menu_url&quot;: &quot;#&quot;,
    &quot;menu_icon&quot;: &quot;fa fa-database&quot;,
    &quot;order_by&quot;: 6,
    &quot;has_child&quot;: 1,
    &quot;child&quot;: [
      {
        &quot;id&quot;: 269,
        &quot;parent_id&quot;: 266,
        &quot;menu_name&quot;: &quot;Client&quot;,
        &quot;menu_url&quot;: &quot;/server_and_db_info/client&quot;,
        &quot;menu_icon&quot;: null,
        &quot;order_by&quot;: 7,
        &quot;has_child&quot;: 0,
        &quot;child&quot;: []
      },
      {
        &quot;id&quot;: 268,
        &quot;parent_id&quot;: 266,
        &quot;menu_name&quot;: &quot;VPN&quot;,
        &quot;menu_url&quot;: &quot;/server_and_db_info/vpn&quot;,
        &quot;menu_icon&quot;: null,
        &quot;order_by&quot;: 8,
        &quot;has_child&quot;: 0,
        &quot;child&quot;: []
      },
      {
        &quot;id&quot;: 262,
        &quot;parent_id&quot;: 266,
        &quot;menu_name&quot;: &quot;Server&quot;,
        &quot;menu_url&quot;: &quot;/server_and_db_info/server&quot;,
        &quot;menu_icon&quot;: &quot;&quot;,
        &quot;order_by&quot;: 9,
        &quot;has_child&quot;: 0,
        &quot;child&quot;: []
      },
      {
        &quot;id&quot;: 267,
        &quot;parent_id&quot;: 266,
        &quot;menu_name&quot;: &quot;Database&quot;,
        &quot;menu_url&quot;: &quot;/server_and_db_info/database&quot;,
        &quot;menu_icon&quot;: null,
        &quot;order_by&quot;: 10,
        &quot;has_child&quot;: 0,
        &quot;child&quot;: []
      },
      {
        &quot;id&quot;: 271,
        &quot;parent_id&quot;: 266,
        &quot;menu_name&quot;: &quot;Domain&quot;,
        &quot;menu_url&quot;: &quot;/server_and_db_info/domain&quot;,
        &quot;menu_icon&quot;: null,
        &quot;order_by&quot;: 15,
        &quot;has_child&quot;: 0,
        &quot;child&quot;: []
      }
    ]
  }
  </code></pre>
  <p><strong>Code:</strong></p>
  <pre><code>&lt;div
    class=&quot;menu-padding padding-top&quot;
    v-for=&quot;(data, index) in getAllMenu&quot;
    :key=&quot;index&quot;
  &gt;
    &lt;input
      type=&quot;checkbox&quot;
      v-model=&quot;selectedMenu&quot;
      :value=&quot;data.id&quot;
      @change=&quot;select(data.id, index)&quot;
    /&gt;
    &lt;label&gt;{{ data.menu_name }}&lt;/label&gt;
    &lt;div
      class=&quot;padding-left&quot;
      v-if=&quot;data.child.length &gt; 0&quot;
    &gt;
      &lt;div
        v-for=&quot;(data_child, index) in data.child&quot;
        :key=&quot;index&quot;
      &gt;
        &lt;input
          type=&quot;checkbox&quot;
          v-model=&quot;selectedMenu&quot;
          :value=&quot;data_child.id&quot;
          @change=&quot;selectChild(data.id, data_child.id)&quot;
        /&gt;
        &lt;label&gt;{{ data_child.menu_name }} {{ data_child.id }}&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>