0xD34F

В родителе заводите счётчик экземпляров дочернего компонента:

data: () => ({
  repeat: 0,
}),

И рендерите соответствующее их количество:

<child-component v-for="i in repeat"></child-component>

При необходимости отрендерить ещё - увеличиваете значение счётчика:

<button @click="repeat++">add one more child component instance</button>

Вместо

<a href="#">{{item.links.join(' ')}}</a>

пусть будет

<a v-for="n in item.links" href="#">{{ n }}</a>

https://jsfiddle.net/d9bfpxo4/

Вычисляемое свойство:

data: () => ({
  items: [ ... ], // массив данных
  columns: 666, // количество колонок, на которые надо разбить items
}),
computed: {
  columnItems() {
    const { items, columns } = this;
    const colSize = Math.ceil(items.length / columns);
    return Array.from(
      { length: columns },
      (n, i) => items.slice(i * colSize, (i + 1) * colSize)
    );
  },
},

<ul v-for="col in columnItems">
  <li v-for="n in col">{{ n }}</li>
</ul>

Рейтинг должен быть не набором картинок, а числом. В зависимости от которого, та или иная картинка будет показана определённое количество раз:

<img v-for="i in 5" :src="i > ratingValue ? whiteStar : blackStar">

https://jsfiddle.net/cfvt6ka3/

functional: true,
render: (h, ctx) => h('div', Array(ctx.props.количествоПовторений).fill(ctx.slots().default)),

https://jsfiddle.net/pw8nubhc/

<option
  v-for="(n, i) in options"
  v-text="n"
  v-bind="!i && { disabled: true, value: '' }"
></option>

Вот только не могу понять, в чём смысл отключения option'а, содержимое которого вполне осмысленное? - если пользователь выбрал что-то другое, а потом решил вернуться к первому варианту, то сделать это не удастся. Если вы хотите создать что-то вроде плейсхолдера, то создавайте отключенный option отдельно:

<option disabled value="">выбирай!</option>
<option v-for="n in options">{{ n }}</option>

this.maskTel.lazy = true;
this.$nextTick(() => this.valueTel = '');

Складываете данные блоков в массив, каждому элементу массива добавляете свойство, которое будет отвечать за показ контента:

data: () => ({
  items: [
    { show: true, ... },
    { show: true, ... },
    ...
  ],
}),

<template v-for="(n, i) in items">
  <button @click="n.show = !n.show">{{ n.show ? 'hide' : 'open' }}</button>
  <div class="list" v-show="n.show">
    ...
  </div>
  <hr v-if="i !== items.length - 1">
</template>

https://jsfiddle.net/ra5byco9/

UPD. Вынесено из комментариев:

С v-for я знаю как, а без него никак?

Дело не в v-for, а в том, что состояние каждого скрываемого-показываемого элемента должно управляться отдельным свойством. Можно его, свойство, сделать частью компонента, отвечающего за демонстрацию пары кнопка-контент. Дальше можете создавать столько экземпляров, сколько потребуется.

Потому что по умолчанию v-model слушает событие input.

Замените change на input, или укажите change в настройках model.

В первом случае контекстом будет не экземпляр компонента, так что если внутри метода вы хотите вызывать другие методы или обращаться к свойствам, этот вариант неприемлем.

Второй - более короткая запись третьего.

При вычислении totalTon ищите выбранный option по его значению:

totalTon() {
  return this.number * this.options.find(n => n.value === this.selected).ton;
},

Или вместо :value="option.value" сделайте :value="option".

Тогда вычисляемые свойства примут следующий вид:

total() {
  return this.number * this.selected.value;
},
totalTon() {
  return this.number * this.selected.ton;
},

Ну и дефолтное значение selected в этом случае тоже придётся поправить.

Убрать обработку события keyup и привязку атрибута product_id; метод priceChange вырезать.

Заменить v-model="sum[product.id]" на :value="sum[product.id]" readonly.

Свойство sum сделать вычисляемым:

sum() {
  return Object.fromEntries(Object.entries(this.price).map(n => ([
    n[0],
    (this.result[n[0]] || 0) * n[1],
  ])));
},

Попробуйте @click="e => e.stopImmediatePropagation()" в дочернем компоненте.

UPD. В комментариях выяснилось, что компонентов на самом деле три - в дочернем клики происходят тоже по экземпляру компонента.

Чтобы заработал модификатор stop, нужен объект события. Его можно прокидывать из компонента, на экземпляре которого ловите клик, т.е., там на корневом элементе должно быть @click="$emit('click', $event)". Или, добавляем модификатор native: @click.native.stop.

Сделать компонент, предназначенный для отображения одного элемента массива (т.е., одного вложенного массива). Корневым узлом будет tbody - их в таблице может быть несколько. Нулевой элемент переданного массива отображается всегда, а остальные по условию. Как-то так:

props: [ 'items' ],
data: () => ({
  showAll: false,
}),

<tbody>
  <tr>
    <td>{{ items[0] }}</td>
    <td>
      <button
        v-if="items.length > 1"
        v-text="showAll ? '-' : '+'"
        @click="showAll = !showAll"
      ></button>
    </td>
  </tr>
  <template v-if="showAll">
    <tr v-for="n in items.slice(1)">
      <td>{{ n }}</td>
      <td></td>
    </tr>
  </template>
</tbody>

Ну и создаёте столько экземпляров этого компонента, сколько в массиве элементов:

<table>
  <v-tbody v-for="n in items" :items="n" />
</table>

https://jsfiddle.net/vx3k8bsh/

Индекс кастомного значения можно определить как разность текущего и минимального:

<template #thumb-label="{ value }">
  {{ ticksLabels[value - min] }}
</template>

Вместо input'ов сделайте select'ы:

computed: {
  items() {
    return this.ticksLabels.map((n, i) => ({
      text: n,
      value: this.min + i,
    }));
  },
},

от <v-select :items="items" v-model="range[0]"></v-select>
до <v-select :items="items" v-model="range[1]"></v-select>

computed: {
  newTodoValid() {
    return this.newTodo.length >= 10;
  },
},

<input :class="newTodoValid ? 'valid' : 'not-valid'">
<button :disabled="!newTodoValid">

.valid {
  border: 2px solid green;
}

.not-valid {
  border: 2px solid red;
}

https://jsfiddle.net/3jxqo9y8/