[Vuejs]-V-for not working when building array from external JSON file

@Luckyfella provided a solution, which can be found in the created() lifecycle hook below:

// Component - Product Select
  app.component('product-select', {
    data() {
      return {
        selected: '',
        options: null
      }
    },
    template: `
      <div class="ui fluid labeled multiple search selection dropdown">
        <input type="hidden"
               name="products"
               v-model="selected"
               @change="selectProducts">
        <i class="dropdown icon"></i>
        <div class="default text">Select Products</div>

        <div class="menu">
          <div v-for="(option, index) in options"
               class="item"
               v-bind:data-value="option.name">
            {{ option.name }}
          </div>
        </div>
      </div>
    `,
    methods: {
      selectProducts(event) {
        this.selected = event.target.value.split(',');
        console.log(this.selected);
      }
    },
    created: function () {
      fetch(productsJSON)
        .then(r => r.json())
        .then(options => {
          this.options = options;
        });
    }
  });