Vue: Как повторно визуализировать представление в середине цикла обработки событий?

https://codepen.io/anon/pen/mqbaXE?editors=1010

Я бы хотел, чтобы value отображалось как "B" сразу после нажатия кнопки, а затем отображалось как "C" после завершения огромного цикла. Как я могу это сделать? В настоящее время он никогда не отображается как "B".

В моем фактическом приложении я запускаю кучу симуляций. Когда пользователь нажимает "Имитировать", мне нужно: изменить текст, чтобы сказать "Имитация...", запустить симуляции, а затем изменить текст обратно, чтобы сказать "Имитировать".

Я пробовал Vue.nextTick, vm. $ ForceUpdate и setTimeout(fn, 0), но никто не работает.

HTML

<div id="example">
  <p>Value: {{ message }}</p>
  <button v-on:click="change()">Change</button>
</div>

JS

var vm = new Vue({
  el: '#example',
  data: {
    message: 'A'
  },
  methods: {
    change: change
  }
})

function change () {
  vm.message = 'B';

  setTimeout(function () {
    for (var i = 0; i < 2000000000; i++) {}
    vm.message = 'C';
  }, 0);  
}