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

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

export default {
  name: "App",
  data() {
    return {
      title: 'Hello World',
      message: 'your todo app',
      todos: []
    }
  },
}

何も考えずに書くと、

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

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

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

API — Vue.js
Vue.js - The Progressive JavaScript Framework

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

// 外に関数を1つつくっておく
function initialState() {
  return {
    title: 'Hello World',
    message: 'your todo app',
    todos: []
  }
}

export default {
  name: "App",
  data() {
    // 初期値として関数呼び出しの結果を返す
    return initialState()
  },
  methods: {
    reset: function() {
      // リセット時は`$data`にアサイン
      Object.assign(this.$data, initialState());
    },
  }
}

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

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