Vue.jsでコンポーネント内のメソッド使い回しがうまくいかない

Question

困ってること

Vue.jsでサイトを作っており、
インスタンスごとに下記のようなメソッドを使って、ある程度スクロールするとイベントを発火するためのフラグ（isActive）をtrueにする処理を使っています。
（trueになると、isshowなりでコンテンツが現れます。今回その部分は割愛します）

new Vue({
  el:'app',
  data:{
    scrollY:0,
    isActive:false
  },
  mounted(){
    window.addEventListener('scroll',this.handleScroll);

  },
  methods: {
  handleScroll() {
       this.scrollY = window.scrollY;
       if (this.scrollY >= 3000  //3000までウインドウがスクロールするとtrueに
         this.isActive = true;
       }
  }
}
})

<section class="app">
    <div v-show="isActive" >
      <h1>ある程度スクロールすると現れるコンテンツ </h1>
    </div>
</section>

やりたいこと

今はこれを、インスタンスごとに書いて、
コンテンツの位置によって3000の部分（スクロールの値）を変えているのですが、
メンテナンス性がわるいので、methodsのところを1箇所に書き、それを使いまわしたいと思っています。

component化すればいいのかもしれませんが、
componentでtemplateを複数の場所で使う方法はわかるのですが、メソッドの使い回す方法がわかりません。。（公式「https://jp.vuejs.org/v2/guide/components.html」にはコンポーネントでもmethods、オプションを受け入れます。とあるのでできるとは思うのですが。。）

さらに各インスタンス毎のコンテンツの位置も伝えたいのです。

自分で試したこと

こんな感じで試しに書いてみましたが、、コンソール上、

[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <MoveTest>
<Root>

というエラーになってしまいます。

<div id="test">
  <move-test><span v-show="isActive">ここが動くか</span></move-test>
</div>

//コンポーネント
Vue.component('move-test', {
    props:['position'],
    mounted(){
      window.addEventListener('scroll',this.handleScroll);
    },
    methods: {
    handleScroll() {
         this.scrollY = window.scrollY;
         if (this.scrollY >= position){
           this.isActiveup = true;
         }else{
           this.isActive = false;
         }
    }
  }
})

new Vue({
    el:'#test',
    data:{
      position:2000,
      isActive:false
    }
  })

何か誤っているのか、もしくはそもそも
スクロール時に複数のコンテンツに動きをつけたいなら、もう少し違う方法がないか、などアドバイスいただけますと幸いです。

追記:

<div id="test"> <move-test><span v-show="isActive">ここが動くか</span></move-test> </div> <div id="test2"> <move-test><span v-show="isActive">ここも動くか</span></move-test> </div>

というコンテンツを記載したい時に、
test1とtest2をインスタンス化した時に、それぞれを共通したメソッド（ただし発火のタイミングはtest1.2で異なる）で使う方法があればと思っています。

Answer 1

間違いだらけなので何が誤っているのかについての
詳細な説明は割愛します。

動作するコードを記載しましたので、こちらのコードと
公式サイトのコンポーネントの基本を見ていただければ
何が問題だったかご理解いただけるかと。

body {
  height: 4000px;
}
#test {
  position: fixed;
}

<div id="test">
  <move-test></move-test>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
//コンポーネント
Vue.component('move-test', {
  data() {
    return {
      position: 2000,
      isActive: false
    }
  },
  template: '<span v-show="isActive">ここが動くか</span>',
  methods: {
    handleScroll() {
      console.log(window.scrollY);
      if (window.scrollY >= this.position) {
        this.isActive = true;
      } else {
        this.isActive = false;
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  }
});

new Vue({
  el: "#test"
});
</script>

Comments

[ink88882]

コメントありがとうございます！

「やりたいこと」が説明不足で申し訳ありません。
これであれば動くこと自体はできるかと思うのですが、
2つ目、３つ目のコンテンツで同じメソッド（同じコンポーネント）の使い回しをする際にはコンポーネント側で値を持ってしまうと、全てposition：2000の位置で発火してしまい、
また、templateの内容をコンポーネント側で持ってしまうと、違うコンテンツの記述ができず。。

例：コンテンツ1と2で異なる文章を記載しており、
コンテンツ1はスクロール値1000で、
コンテンツ2はスクロール値2000で動くようなことができればと思っております。

追記を記載いたしましたので、もし方法があればご教授いただけますと助かります。

[yasutomi]

propsを使用すれば可能です。
詳細は公式サイトのコンポーネントの基本をご確認ください。