JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://vuejs.org/js/vue.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>VueJS inline elements v-for</title>
</head>
<body>
  <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>
</body>
</html>

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
  }
});