报错 'update' of undefined

<template>

<swiper :options="swiperOption" ref="swiper">

<swiper-slide>

<slot></slot>

</swiper-slide>

<div class="swiper-scrollbar" v-if="scrollbar" slot="scrollbar"></div>

</swiper>

</template>

<script>

import {Swiper,SwiperSlide} from 'vue-awesome-swiper';

export default {

name:'MeScroll',

components:{

Swiper,

SwiperSlide

},

props:{

scrollbar:{

type:Boolean,

default:true

},

data1:{

type:[Array,Object]     // 数组或者对象

}

},

data(){

return{

swiperOption:{

direction: 'vertical',

slidesPerView: 'auto',

freeMode: true,

setWrapperSize: true,

scrollbar: {

el: this.scrollbar ? '.swiper-scrollbar' : null,

hide: true

}

}

}

},

watch:{

data1(){

this.update()

}

},

methods:{

update(){

this.$refs.swiper && this.$refs.swiper.swiper.update()  // 更新滚动条，用swiper提供的api

}

}

}

</script>

<style lang="scss" scoped>

.swiper-container{

overflow: hidden;

width: 100%;

height: 100%;

}

.swiper-slide{

height: auto;

}

</style>

----------------------------------------------------

------------------------

老师这是哪里不对