javascript - 属性或方法“绑定”未在实例上定义，但在渲染期间引用

Question

该bind()方法mounted有效，但在通过安装的按钮单击时调用时无效。我正在为croppie和vue2使用vue包装器。有谁知道我是否可以this.$refs.croppieRef.bind()直接在模板中使用？

<script>
// import Vue from 'vue'
// import VueCroppie from 'vue-croppie'
// Vue.use(VueCroppie)
export default {
    mounted () {
      console.log('hojhojoh')
      this.$refs.croppieRef.bind({
        url: 'http://i.imgur.com/fHNtPXX.jpg'
      })
      this.$refs.croppieRef.rotate(90)
      this.$refs.croppieRef.rotate(90)
      console.log('hojhojoh')
    },
  // bind () {
  //   console.log('yoyoyoyoy')
  // },
    data () {
      return {
        cropped: null,
        images: [
          'http://i.imgur.com/fHNtPXX.jpg',
          'http://i.imgur.com/ecMUngU.jpg',
          'http://i.imgur.com/7oO6zrh.jpg',
          'http://i.imgur.com/miVkBH2.jpg'
        ]
      }
    },
    methords: {
      bind () {
        console.log('hihihihi')
        this.croppie.bind({
          url: 'http://i.imgur.com/ecMUngU.jpg'
        })
      },
      crop () {
        this.$refs.croppieRef.result((output) => {
          this.cropped = output
        })
      },
      rotate: function (rotationAngle) {
        this.$refs.croppieRef.rotate(rotationAngle)
      }
    }
}
</script>

<template>
    <div>
      <vue-croppie
        ref=croppieRef
        resultType="base64"
        :enableOrientation="true">
      </vue-croppie>

      <img v-bind:src="cropped">

      <button v-on:click="bind()">Bind</button>
      <!-- Rotate angle is Number -->
      <button v-on:click="rotate(-90)">Rotate Left</button>
      <button @click="rotate(90)">Rotate Right</button>
      <button @click="crop()">Crop</button>
    </div>
</template>