Как проинициализировать большое кол-во однотипных свойств?
beforeMount() { // какой тут хук использовать?
  const fields = ['input1', 'input2']

  fields.forEach(item => this[item] = '') // я правильно добавляю в this, а не в this.$data?
}
Никакой хук не использовать. Всё неправильно.

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

Объект с данными, над которым экземпляр Vue осуществляет наблюдение. Экземпляр проксирует сюда вызовы своих полей. (Например, vm.a будет указывать на vm.$data.a)
С другой стороны, пытаться туда что-то добавлять бессмысленно, потому что

Vue не может обнаружить добавление или удаление свойства. Так как Vue добавляет геттер/сеттер на этапе инициализации экземпляра, свойство должно присутствовать в объекте data для того чтобы Vue преобразовал его и сделал реактивным.
<...>
Во Vue нельзя динамически добавлять новые корневые реактивные свойства в уже существующий экземпляр.


Массив сделайте:

data: () => ({
  inputs: Array(20).fill(''),
}),
<div v-for="(n, i) in inputs">
  Значение #{{ i }}:
  <input v-model="inputs[i]">
  {{ n }}
</div>
Немного не соглашусь с концепцией.
Я бы на вашем месте сделал все 20 свойств, но при этом применял семантичное именование. (ну т.е. не input1, а email). В данном случае вы теряете "экономию на спичках", но ваш код становится более осмысленным и читабельным.
По поводу "очистки" значений, можно как сделать функцию очистки всех полей, так и сделать подобие defaultState для всего списка полей, и просто затирать им рабочие свойства.