<template>
    <div>
        <v-btn>Snack</v-btn>
        <v-text-field v-model="text" v-resize="onResize" label="First name"></v-text-field>
        <span v-text="computedText"></span>
    </div>

</template>

<script lang="js">
import { useThrottleFn } from '@vueuse/core'
import { ref, computed, watch } from '@vue/composition-api'

export default {
    name: 'Snack',
    setup() {

        const text = ref(null)

        const computedText = computed(() => `Has escrito: ${text.value || ""}`)

        watch(text, val => {
            console.log(val)
        })

        const onResize = useThrottleFn(() => {
            console.log({ x: window.innerWidth, y: window.innerHeight })
        }, 300)

        return {
            text,
            computedText,
            onResize
        }
    }
}
</script>

<style scoped lang="scss">
</style>