value prop no longer has a required type, can accept null values

src/App.vue

@@ -54,7 +54,7 @@
           <label class="control-label">
             <input v-model="multiple" type="checkbox"> Multiple
           </label>
-          <span class="help-block">Equivalent to the <code>multiple</code> attribute to a <code>&#x3C;select&#x3E;</code></span>
+          <span class="help-block">Equivalent to the <code>multiple</code> attribute to a <code>&#x3C;select&#x3E;</code>. You'll want to clear any selections you have made before changing this option. It's not one that should be changed after render.</span>
         </div>
 
         <div class="form-group">
@@ -94,10 +94,10 @@ export default {
       // select: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}],
       select: null,
       placeholder: 'Choose a Country',
-      multiple: false,
+      multiple: true,
       maxHeight: '400px',
-      // options: require('./countries.js')
+      options: require('./countries.js')
-      options: ['one','two','three']
+      // options: ['one','two','three']
       // options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}, {label: 'This is Baz', value: 'baz'}]
     }
   }

src/components/Select.vue

@@ -117,7 +117,7 @@
           {{ placeholder }}
         </span>
 
-        <span class="alert alert-info" v-for="option in value">
+        <span class="alert alert-info" v-for="option in valueAsArray">
           {{ getOptionLabel(option) }}
           <button v-if="multiple" @click="select(option)" type="button" class="close">
             <span aria-hidden="true">&times;</span>
@@ -212,23 +212,24 @@
       });
     },
     
-    watch: {
-      value (val, oldVal) {
-        // return this.$set('value', ['test'])
-      }
-    },
-
     methods: {
-      select(v) {
+      select(option) {
-          if (this.value.indexOf(v) === -1) {
+          if (! this.isOptionSelected(option) ) {
             if (this.multiple) {
-              this.value.push(v)
+
+              // check if value is currently null/undefined/false
+              if( ! this.value ) {
+                  this.$set('value', [option])
+              } else {
+                this.value.push(option)
+              }
+
             } else {
-              this.value = [v]
+              this.value = option
             }
           } else {
             if (this.multiple) {
-              this.value.$remove(v)
+              this.value.$remove(option)
             }
           }
 
@@ -244,7 +245,7 @@
       },
 
       isOptionSelected( option ) {
-        if( this.multiple ) {
+        if( this.multiple && this.value ) {
           return this.value.indexOf(option) !== -1
         }
 
@@ -314,6 +315,16 @@
         }
 
         return true;
+      },
+
+      valueAsArray() {
+        if( this.multiple ) {
+          return this.value
+        } else if (this.value) {
+            return [this.value]
+        }
+
+        return []
       }
     }