どうやって書くのがいいのかなーと迷いました。

例として適切ではないですが、例えば↓のようなコンポーネントがあったとして、なにかのタイミングですべてのデータをリセットしたいとします。

 1export default {
 2  name: "App",
 3  data() {
 4    return {
 5      title: 'Hello World',
 6      message: 'your todo app',
 7      todos: []
 8    }
 9  },
10}

何も考えずに書くと、

1this.title = 'Hello World'
2this.message = 'your todo app'
3this.todos = []

みたいになりますが、項目が増えたときに破綻するのは目に見えています。

そこでこちらの$dataを使います。

jp.vuejs.org →https://jp.vuejs.org/v2/api/#vm-data

この$dataにデータオブジェクトが入っているので、まとめて値をセットするときには$dataへのアサインで代用できます。

 1// 外に関数を1つつくっておく
 2function initialState() {
 3  return {
 4    title: 'Hello World',
 5    message: 'your todo app',
 6    todos: []
 7  }
 8}
 9
10export default {
11  name: "App",
12  data() {
13    // 初期値として関数呼び出しの結果を返す
14    return initialState()
15  },
16  methods: {
17    reset: function() {
18      // リセット時は`$data`にアサイン
19      Object.assign(this.$data, initialState());
20    },
21  }
22}

これで一応動いてくれました。

もっといい方法があるとか、これだとだめな理由があるとかの場合はお知らせしてもらえると嬉しいです。

追記

↑の方法では、途中で新しいプロパティをthis.data追加した場合にそのプロパティが残ったままになってしまいます。

1this.data.memo = 'hogehoge'

その場合、一度すべてのプロパティを一度削除してから上記のassignのコードを実行するのが無難です。

1export default {
2  methods: {
3    reset: function() {
4      Object.keys(this.$data).forEach(key => delete this.$data[key])
5      Object.assign(this.$data, initialState());
6    },
7  }
8}