Vue.js不能切换字体-可怕的图标

我正在尝试基于布尔值切换字体棒图标，但在绘制后，字体棒图标似乎仍保留在屏幕上：

https://jsfiddle.net/50wL7mdz/200312/

HTML：

<script src="https://unpkg.com/vue"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>



<div id="app">
  <input v-model="marked" type="checkbox"/>
  <i v-if="marked" class="far fa-check-square"></i>
</div>

JS：

new Vue({
  el: '#app',
  data: {
    marked: false
  }
})

是我做错了什么，还是Font-awed或vue.js中有错误？

svg

"i"标记注释转成推荐答案后，使用一些换行<span v-if="marked"><i class="far fa-check-square"></i></span>