0xD34F

с перезагрузкой страницы

Ну тогда можно особо и не церемониться - вешайте на форму обработчик submit, в нём элементы, чьи значения надо исключить, удаляйте (el.remove()) или делайте неактивными (el.disabled = true). Например:

<form @submit="onSubmit">
  <div v-for="(v, k) in formData">
    <div>{{ k }}:</div>
    <div><input v-model="formData[k]" :name="k" :ref="k"></div>
  </div>
  <button>submit</button>
</form>

data: () => ({
  formData: {
    forename: '',
    surname: '',
    email: '',
  },
}),
methods: {
  onSubmit() {
    Object.entries(this.formData).forEach(([ k, v ]) => !v && (this.$refs[k][0].disabled = true));
  },
},

Предполагаю, что это связано с...

Предполагать не надо - достаточно открыть консоль, и увидеть, что возникает ошибка из-за попытки чтения свойства несуществующего объекта.

Можете следить за изменением списка, и если выбранный элемент отсутствует, устанавливать в качестве выбранного какой-нибудь существующий (нулевой, например):

watch: {
  secondList(val) {
    if (!val[this.secondElementSelected]) {
      this.secondElementSelected = 0;
    }
  },
},

Или, можете использовать optional chaining при обращении к свойствам выбранного элемента:

:value="secondList[secondElementSelected]?.elementYes"

Не надо никакого data-id. Добавьте option'у :value="location.id".

Лучше никак. Измените api так, чтобы получать json вместо html, и создавайте разметку из данных средствами vue.

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

<div v-html="свойствоСодержащееHTML" @click="onClick">

methods: {
  onClick(e) {
    if (e.target.tagName === 'BUTTON') {
      const id = e.target.closest('.product').dataset.id;
      ...
    }
  },
  ...
},

https://jsfiddle.net/grfo05vm/

Всё правильно, не работает. Потому что нечему работать - vue-the-mask отсутствует. Надо подключить.

Запускайте наблюдение после получения данных:

async created() {
  await this.getAsyncData();
  this.$watch('some_value', value => {
    ...
  });
},

Раз у вас там vue, используйте модификатор:

<input type="number" v-model.number="Current.amount">

data: () => ({
  now: Date.now(),
  ...
}),
computed: {
  filteredList() {
    return this.list.filter(n => this.parseDate(n.dateend) < this.now);
  },
  ...
},
methods: {
  parseDate: str => new Date(str.split('.').reverse().join('-')),
  ...
},

Можно сделать...

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

  computed: {
    itemsWithBullshitCounter() {
      let counter = -1; /* или 0, если хотите, чтобы нулевой элемент массива получил ненулевой индекс
                           в том случае, если для него не выполняется условие обнуления */
      return this.items.map((n, i) => ({
        ...n,
        counter: counter = (здесь проверяете, надо ли обнулить счётчик
          ? 0
          : counter + 1
        ),
      }));
    },
  },

  
  

  <div v-for="n in itemsWithBullshitCounter">
    вместо индекса используете значение добавленного свойства: {{ n.counter }}
  </div>

  
  https://jsfiddle.net/hk93q6gf/
  
  
• ...вычисляемое свойство, где исходный массив будет разбит на несколько кусков:
  
  

  computed: {
    chunkedItems() {
      return this.items.reduce((acc, n, i) => {
        if (!i || на текущем элементе надо сбросить индексацию) {
          acc.push([]);
        }
  
        acc[acc.length - 1].push(n);
  
        return acc;
      }, []);
    },
  },

  
  

  <template v-for="chunk in chunkedItems">
    у каждого куска индексация независимая:
    <div v-for="(n, i) in chunk">{{ i }}</div>
  </template>

  
  https://jsfiddle.net/hk93q6gf/1/
  
  
• ...метод, который будет вычислять нужный индекс (плохо - вычисления выполняются при каждом рендеринге):
  
  

  methods: {
    createStrangeIndex(arr, baseIndex) {
      let index = 0;
  
      while (baseIndex > 0 && на элементе arr[baseIndex--] сбрасывать индексацию не надо) {
        index++;
      }
  
      return index;
    },
  },

  
  

  <div v-for="(n, i) in items">{{ createStrangeIndex(items, i) }}</div>

  
  https://jsfiddle.net/hk93q6gf/2/
  

есть метод orgajax - он тянет данные с сервера, в том числе и HTML код

А должен - просто данные, на основе которых разметка будет создаваться уже на клиенте. Переделывайте.

Ну или можете путём говнокодера пойти - компилируйте получаемые шаблоны.

Потому что они так устроены:

we can mark components as functional, which means that they’re stateless (no reactive data) and instanceless (no this context)

https://jsfiddle.net/Ldsh39bc/

computed: {
  listGroupedByTypeId() {
    return this.list.reduce((acc, n) => {
      (acc[n.type_id] = acc[n.type_id] || []).push(n);
      return acc;
    }, {});
  },
},

как установить страницу пагинации (к примеру 2-ую или 3-ю)

Добавляете в компонент свойство page:

data: () => ({
  page: 1,
  ...
}),

Цепляете его к таблице:

<v-data-table
  :page.sync="page"
  ...

Дальше просто устанавливайте значение page - таблица будет показывать соответствующую страницу.

как установить обработчик на клик по стрелке вперед

Не надо обработчиков клика. Следите за значением page:

watch: {
  page(val) {
    ...
  },
},

computed: {
  done() {
    return this.todos.filter(n => n.done);
  },
},

<ol v-if="done.length">
  <li v-for="n in done" v-text="n.text"></li>
</ol>

Ключевое слово в качестве имени свойства? Умно, ничего не скажешь.

:options="{ scrollWheelZoom: false }"
@update:zoom="zoom = $event"
@wheel.native="onWheel"

methods: {
  onWheel(e) {
    if (e.deltaY < 0) {
      this.zoom++;
      e.preventDefault();
    }
  },
},

data: () => ({
  columns: [ 'aaa', 'bbb', 'ccc' ],
  repeat: 5,
}),
computed: {
  repeatedColumns() {
    return Array(this.repeat).fill(this.columns).flat();
  },
},

<td v-for="n in repeatedColumns">{{ n }}</td>

Добавьте в option'ы свойство, которое будет указывать, на что надо умножать price:

options: [
  {
    ...
    propToBeMultipliedByPrice: 'area',
  },
  {
    ...
    propToBeMultipliedByPrice: 'perimeter',
  },
],

И умножайте:

{{ option.price * calc[option.propToBeMultipliedByPrice] }}

{{ dish[`title_${lang}`] }}

или

v-text="dish['title_' + lang]"

или

:text.prop="dish['title_'.concat(lang)]"