Normalmente, cuando el usuario escribe algún valor en el campo de entrada, el valor se actualiza automáticamente en un modelo. Lo que necesito es evitar que el valor se actualice automáticamente durante un período de tiempo. En mi aplicación, dibujo una cuadrícula en un lienzo. El usuario escribe la longitud y el ancho en los campos de entrada. Quiero activar el dibujo de una cuadrícula cuando el usuario establece el width , no antes (uso el watch por ese motivo). El problema es que cuando el usuario escribe ancho, por ejemplo, 57, primero dibuja una cuadrícula de ancho = 5 y justo después de eso, el ancho = 57. Significa que finalmente tengo 2 cuadrículas. La razón es que Vue responde inmediatamente a lo que el usuario ingresa.

Traté de evitarlo de alguna manera usando v-model.lazy pero no funciona. También traté de usar setTimeout() pero parece que no funciona en absoluto. Comenté este fragmento de código en mi ejemplo reproducible:

 function draw() { for (var j=0; j<rows; j++) { for (var i=0; i<cols; i++) { tile = new Rectangle({width:size, height:size, borderColor:"#a8a8a8", borderWidth:0.2}) .centerReg(tiles) .loc(size/2 + i*(size), size/2 + j*(size)); } } } setTimeout(draw, 3000) // here I wait 3 sec after user inputs value in this field

En términos generales, quiero que el programa espere hasta que el usuario ingrese la longitud y el ancho y una vez que se ingresen los valores, dibuje una cuadrícula.

Aquí hay un ejemplo reproducible: https://codesandbox.io/s/vue-2-playground-vuex-drag-and-snap-to-tiles-un6984?file=/src/components/ZimModel.vue