vue-functions

<template> <div> <p>Prop 'initialValue': {{ initialValue }}</p> <p>Local state 'currentValue': {{ currentValue }}</p> <button @click="currentValue++">Increment Local Value</button> <p>Window Inner Width: {{ windowSize.innerWidth }}px</p> <p>Window Inner Height: {{ windowSize.innerHeight }}px</p> </div> </template> <script lang="ts"> import Vue from 'vue'; import { updatablePropsEvenUnbound, windowSize } from 'vue-functions'; export default Vue.extend({ name: 'MyComponent', // Use updatablePropsEvenUnbound to make 'initialValue' behave like v-model locally mixins: [ updatablePropsEvenUnbound({ initialValue: { localName: 'currentValue' }, // Maps 'initialValue' prop to 'currentValue' data property }), windowSize, // Provides reactive windowSize object ], props: { initialValue: { type: Number, default: 10, }, }, data() { return { // currentValue will be initialized from initialValue prop // and can be updated locally without mutating the prop directly. // windowSize is provided by the mixin and is reactive. }; }, mounted() { console.log('Component mounted. Initial local value:', (this as any).currentValue); console.log('Window size available (innerWidth):', (this as any).windowSize.innerWidth); }, watch: { initialValue(newValue: number) { console.log('Prop initialValue changed to:', newValue); }, currentValue(newValue: number) { console.log('Local currentValue changed to:', newValue); // You can emit an event here if you want to update the parent component // this.$emit('update:initialValue', newValue); }, }, }); </script>