How to use a template multiple times?

Question

JavaScript

Installed Vue, vueify, browserify via node.
There is main.js (entry point):

var Vue = require('vue');
var quality = require('./componets/quality.vue');

new Vue({
  el: '#qua',
  render: function(createElement) {
    return createElement(quality)	
  },
})

The template is included (quality.vue):

<template>
  <div class="qua-item">
    	<div class="qi-img qi-img1"></div>
    	<div class="separator"></div>
    	<div class="qi-text-head"></div>
    	<div class="qi-text">Excepteur sinto occaecat cupidatat non proident, sunt in culpa qui nam sint essent officia mollit.</div>
    </div>
</template>

Code in the same file:

module.exports = {
    data: function(){
      return {
        items: [
          {
            name: '123',
          },
          {
            name: '321',
          }
        ],
      }
    }
  }

I display this template in the main file (index.html): Everything works well, it is displayed, but the problem is that I want to connect this template several times and I can’t figure out how. Tried to duplicate but it's nonsense, I understand. It seems to me that it is necessary through v-for or v-if (I read the documentation), but I can’t understand how. Help whoever can, if you need any more data, then write in the comments.
<div id="qua"></div>
<div id="qua"></div>

Answer 1

I can’t solve the problem itself at the root, but there is a workaround (maybe it’s correct, but I didn’t want it), as I did (everything inside the * .vue file):

<template>
  <div class="qua-item-list">
   		<div class="qua-item" v-for="item in items">
    		<div class="qi-img qi-img1">{{ item.name }}</div>
    		<div class="separator"></div>
    		<div class="qi-text-head">{{ item.status }}</div>
    		<div class="qi-text">Excepteur sinto occaecat cupidatat non proident, sunt in culpa qui nam sint essent officia mollit.</div>
    	</div>
    </div>
</template>

module.exports = {
    data: function(){
      return {
        items: [
          {
            name: '123', status: 'done!',
          },
          {
            name: '321', status: 'done!',
          }
        ],
      }
    }
  }

Let me explain how it works (suddenly it will not be clear to someone): v-for loops through each item and how many items there will be so many elements on the page.

Answer 2

Use components.
https://ru.vuejs.org/v2/guide/components.html