Using multiple 'select' HTML element with Vue.js and Materializecss

Question

I'm trying to make an HTML multiple select form element with Vue.js. It works perfectly after following this. However, if I were to add the Materialize css, the select element looks nicer but it does not work and I receive these warnings:

[Vue warn]: : inline selected attributes on will be ignored when using v-model. Declare initial values in the component's data option instead.

[Vue warn]: expects an Array value for its binding, but got Number (found in root instance)

This is my Vue.js code:

        var app = new Vue({
          el: '#app',
          data: {
            selected: 900,
            options: [{
              value: 12,
              text: 12
            }, {
              value: 24,
              text: 24
            }, {
              value: 36,
              text: 36
            }]
          },

This is the select element:

<select v-model="selected" multiple>
    <option selected value="900">Please Select</option>
    <option v-for="option in options" :value="option.value">
    {{ option.text }}
    </option>
</select>
<label>Select appropraite data type(s)</label>

Answer 1

Combining regular Vue and regular Materialize is not a good idea. As there are several conflicting factors which can not easily be resolved, but below are 2 libraries which are helpful. There are few more libraries which are deprecated but the older versions works fine.

Vue-Materialize or Ceri-Materialize will serve your purpose well.