Невозможно распечатать список объектов в 2 столбцах, используя Vue из IE

Question

Мой первый раз, чтобы работать с VUE.У меня есть список объектов, которые должны быть отображены в 2 столбцах и распечатаны (при необходимости).У меня есть все настройки здесь codepen , которые, как кажется, работают в Chrome.Однако, когда я попытался запустить аналогичные коды в IE, браузер по-прежнему отображает список в 2 столбца, как и ожидалось.Однако функция печати, похоже, не работает со 2-й страницы и далее.1-я страница напечатана правильно, но со 2-й страницы 2 столбца становятся 1 столбцом.Как это исправить?Вот мои коды:

HTML

<main>
  <p><label>Columns:<label> <input type="number" v-model="colset"></p>
  <div class="container">
    <table class="col" v-for="column in columns">
      <tr class="item-container" v-for="item in column">
        <td>{{item.fname}}</td><td>{{item.lname}}</td><td>{{item.age}}</td>
      </tr>
    </table>
  </div>
</main>

CSS

.container {
  display: flex;
  border: 1px solid;
}
.col {
  margin: 10px;
  border: 1px solid;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.item-container {
   border: 1px solid;
   padding: 5px;
   margin: 5px;
}

VUE

new Vue({
  el: 'main',
  data: {
    items: [
      {fname: 'Long Item 1',lname: 'Long One',age: 2},
      {fname: 'Long Item 2',lname: 'Long Two',age: 3},
      {fname: 'Long Item 3',lname: 'Long Three',age: 4},
      {fname: 'Long Item 4',lname: 'Long  Four',age: 5},
      {fname: 'Long Item 5',lname: 'Long  Five',age: 6},
      {fname: 'Long Item 6',lname: 'Long  Six',age: 7},
      {fname: 'Long Item 7',lname: 'Long  Seven',age: 8}
    ],
    colset: 2
  },
  computed: {
    columns () {
      let columns = []
      let mid = Math.ceil(this.items.length / this.colset)
      for (let col = 0; col < this.colset; col++) {
         columns.push(this.items.slice(col * mid, col * mid + mid))
      }
      return columns
    }
  }
})