Vue.jsでVueインスタンスにmethodsを渡す方法

Question

いつもお世話になっております。

Vue.jsでVueインスタンスにmethodsを渡す方法で悩んでおります。

エントリーファイル(app.js)

import test from './test.js';
const app = new Vue({
    el: '#app',
    test,
    methods: {
      function2: function() {
        alert('function2')
      }
    }
});

importされるファイル(test.js)

export default {
  methods: {
    function1: function() {
      alert('function1')
    }
  }
}

HTML

<div id="app">
  <button type="button" @click="function1">aaa</button>
  <button type="button" @click="function2">aaa</button>
</div>

このような形で実装をしているのですが、エントリーファイル(app.js)内に記載したmethod(function2) は、HTMLから実行することができました。
ただ、別ファイルにしてimportしたものを、Vueインスタンスに渡して、 function1 も実行できるようにしたいのですが、下記のエラーが発生してしまい、読み込めていないようなのです。

Property or method "function1" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

このような方法は出来ないものなのでしょうか？
まだ、Vue.js を触り始めたばかりで見当違いの質問をしていたら申し訳ございません。

ご教授頂けますと幸いでございます。
何卒、よろしくお願いいたします。

Answer 1

ミックスインの機能では、目的に適していないでしょうか？

https://jp.vuejs.org/v2/guide/mixins.html

// ミックスインオブジェクトを定義
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// このミックスインを使用するコンポーネントを定義
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

Comments

[momoyuri]

なるほどですね！mixinがそのような事が出来る機能だったんですね。
おかげでやりたい事が実装できそうです。
ありがとうございます。