javascript - インライン要素の Vuejs v-for は空白を削除します

Question

インライン要素で v-for を使用して配列 (またはオブジェクト) をループすると、vuejs はその要素の周りに空白をレンダリングしません。

たとえば、次の html があります。

<div id="app">
    Vue Rendering<br>
    <a v-for="fruit in fruits" v-bind:href="fruit.url" v-html="fruit.label"></a>

    </div>
    <div>
    Navite rendering<br>
    <a href="apple.html">Apple</a>
    <a href="banana.html">Banana</a>
    <a href="peach.html">Peach</a>
</div>

そしてこのJavaScript：

var fruits = [
    {
        label: 'Apple',
        url: 'apple.html'
    },
    {
        label: 'Banana',
        url: 'banana.html'
    },
    {
        label: 'Peach',
        url: 'peach.html'
    }
];

var app = new Vue({
    el: '#app',
    data: {
        fruits: fruits
    }
});

Vue がこれをレンダリングすると、リンク間のスペースが削除されます。この jsfiddleを参照してください。

どうすればこの動作に対抗できますか?