Make vModelCheckbox allow Set as model (similar to Array)

[floj]

What problem does this feature solve?

Currently it is possible to bind a checkbox to an array and let Vue populate the array with the checked values. A similar behavior for a native Set as a model would be nice.

The Set API is more accessible in some cases, especially when checking (Set.has vs. Array.find/Array.indexOf) and removing (Set.delete vs. Array.splice/Array.filter) elements from the collection.

What does the proposed API look like?

The API stays the same, just the type of the data model is different. Picking up the example from the docs:

<div id="v-model-multiple-checkboxes">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames" />
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
  <label for="mike">Mike</label>
  <br />
  <span>Checked names: {{ checkedNames }}</span>
</div>

Vue.createApp({
  data() {
    return {
      checkedNames: new Set()
    }
  }
}).mount('#v-model-multiple-checkboxes')

[CyberAP]

You can use a factory pattern for this:

const createSetModel = name => ({
  get() { return Array.from(this[name]) },
  set(value) { this[name] = new Set(value) }
})

export default {
  data() {
    return {
      value: new Set()
    }
  },
  computed: {
    model: createSetModel('value')
  }
}

Example: https://codesandbox.io/s/recursing-brook-6n41k?file=/src/App.vue

[floj]

@CyberAP Thanks for the heads up, this of cause works as expected.
I think its worth considering to merge #1957 because having Set as a model working without a computed property saved some lines of code and eliminates the need the wrap the datas property.