VueJS2-HTML: Как заставить элемент 'a' ждать метод перед загрузкой на следующую страницу?

Question

Так вот мой код на JSFiddle. https://jsfiddle.net/irfandyjip89/eywraw8t/440190/ .

window.onload = function() {
  var app = new Vue({
    el: "#app",
    data: {
      toWorkOrder: "",
      workorder: {
        data: [{
          no_workorder: 1234,
          job: 'Testing'
        }, {
          no_workorder: 2345,
          job: 'Survey'
        }],
        filter: null,
        fields: {
          no_workorder: {
            label: 'No',
            sortable: true
          },
          job: {
            label: 'Job Type'
          },
          details: {
            label: "Action"
          }
        }
      }
    },
    methods: {
      getNoWO(wo) {
        detailString = "localhost/work-order-details.php?no_wo=" + wo;
        alert(detailString);
        return this.toWorkOrder = detailString;
      }
    }
  })
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" rel="stylesheet" />

<div id="app" class="mx-3 my-3">
  <b-table hover small bordered :items='workorder.data' :filter='workorder.filter' :fields='workorder.fields'>
    <div slot="details" slot-scope='work'>
      <a target="_blank" :href="toWorkOrder">
        <b-button variant="dark" class="px-1 py-1" @click='getNoWO(work.item.no_workorder)'>
          Details
        </b-button>
      </a> {{work.item.no_workorder}}
    </div>
  </b-table>
  <!-- So here's the actual problem, it seems that the element a, goes first, without the link given in "toWorkOrder", so it overlaps. However I had no idea how to make a wait for toWorkOrder loads first! -->
  {{toWorkOrder}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

А на страницу направления work-order-details.php

var_dump($_GET);

Что я хотел сделать

1. Пользователь нажал кнопку «Подробнее»
2. Мой метод getNoWO запускается и получает переменную выбранного no_wo
3. getNoWO влияет на toWorkOrder значение, которое привязано к a через :href
4. Пользователь получает запрошенный no_wo на новой странице.

Что на самом деле произошло

1. Пользователь нажал на детали, при первом клике он возвращается на ту же страницу.
2. По второму клику, тогда получилось значение первого клика!
3. Третья попытка, нажмите другую кнопку, и он отправляет пользователю результат второго нажатия.

Так ..

Первый щелчок: Открывает ту же страницу. Второй клик: Получить отправку со значением первого клика. Третий клик: Получить отправку со значением второго клика.

Это странно, потому что когда я нажимаю на первый щелчок, в предупреждении указывается точное значение элемента, на который я нажал, и второго, и так далее. Однако вместо этого я получаю отправку на другие страницы. Больше информации можно спросить.

P.S. Я нашел проблему, вы также можете прочитать ее на JSFiddle. Кажется, что элемент a перекрывается с функцией, поэтому a идет первым без ссылки, указанной в toWorkOrder. Итак, новый вопрос. Как заставить a ждать toWorkOrder пока не загрузится?