значение по умолчанию для тега <select>устанавливается в chrome и edge, но не в IE

Question

Я устанавливаю два значения 2018 и Мое имя в созданном методе для двух отдельных свойств данных.Я передаю свойство данных как v-bind компоненту.

Моя проблема в том, что в chrome и edge оба значения устанавливаются в два раскрывающихся списка (тег) в качестве значения по умолчанию при загрузке страницы.но в IE 11 при загрузке страницы устанавливается только значение года, а не мое имя.

Кто-нибудь знает, почему это так?

App.vue

data: function() {
  return {
    selectedYear: null,
    selectedFacility: null,
  }
},
created: function() {
  //this line will return 2018
  this.selectedYear = this.tableData.year.replace(/\D/g, "");
  //this return will return "My Name"
  this.selectedFacility = this.tableData.tableInfo.rows[0].sName;
}

<template>
  <filter-page v-bind:years="years" v-bind:sel-year="selectedYear"
  v-bind:available-facility="tableData" v-bind:sel- 
   facility="selectedFacility"></filter-page>
 </template>

в filterPage.vue

<select class="form-control input-sm" style="width:120px" id="select-Year" v-model="selYear">
<option v-for="yr in years" v-bind:value="yr" >{{ yr }}</option>
</select>

<select class="form-control input-sm" id="select-facility" v-model="selFacility">
 <option v-for="fieldRows in availableFacility.tableInfo.rows">
       {{fieldRows.facilityName}}
 </option>
</select>

Answer 1

Я достиг этого, включив тег span внутри тега options.спасибо.