title: Vuejs multiple checkbox not working with v-model
body: <p>I have these two content types with many to many relationships. <strong>Size</strong> and <strong>Menu</strong>
  Now in the current situation, I have created a size, assigned multiple menus, when I try to edit the size. the menus checkboxes are not reactive as you can see in the GIF, 5 menus are selected but when I uncheck one menu, two menus get unchecked. I don't know what I am missing here.</p>
  <p><strong>GIF</strong>
  <a href="https://i.stack.imgur.com/oKvlR.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oKvlR.gif" alt="enter image description here" /></a></p>
  <p><strong>Input</strong></p>
  <pre><code>&lt;label v-for=&quot;(type,i) in menus&quot; :key=&quot;i&quot;&gt;
     &lt;p-check color=&quot;danger&quot; name=&quot;ctype&quot; class=&quot;p-default text-sm&quot; v-model=&quot;contentTypes&quot; :value=&quot;type.id&quot;&gt;
          &lt;span class=&quot;text-base capitalize font-medium&quot;&gt;{{type.title}}&lt;/span&gt;
     &lt;/p-check&gt;
  &lt;/label&gt;
  </code></pre>
  <p><strong>Computed Method</strong></p>
  <pre><code>contentTypes: {
      get: function () {
         return this.editingTable.data.menus.map(e =&gt; e.id)
      },
      set: function (value) {
         console.log(value)
      }
  },
  </code></pre>
  <p>Thanks</p>