test vue3 use

App.vue

<template>
  <button ref='button' @click='count++' v-resize='onResize'>count is {{ count }}</button>
</template>

<script>
export default {
  data () {
    return {
      count: 8
    }
  },
  methods: {
    onResize ({ width, height }) {
      console.log('onResize', { width, height })
    }
  },
  mounted () {
    setInterval(() => {
      const { clientWidth: width, clientHeight: height } = this.$refs.button
      console.log('onInterval', { width, height })
    }, 1000)
  }
}
</script>

index.html

<div id='app'></div>
<script type='module'>
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import VueResizeObserver from 'vue-resize-observer'
app.use(VueResizeObserver)
app.mount('#app')
</script>

package.json

{
  "name": "test-vue3-vite",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vite": "^0.20.7",
    "vue-resize-observer": "^1.0.32"
  }
}

npm i
npx vite