Trabajo en la aplicación Vue2. Lo que he notado es que a veces no puedo acceder a los elementos almacenados en data() usando this directamente en mi código. Lo que quiero decir con eso es que a veces necesito asignar this... a una variable dentro de un método para que funcione en lugar de simplemente referirme al elemento de datos por this .

Creé un ejemplo reproducible aquí: https://codesandbox.io/s/vue-2-playground-vuex-drag-and-snap-to-tiles-this-usage-trhd72?file=/src/components/ZimModel.vue

Eche un vistazo al método addRegals() . this.size en todas partes en este método, pero lo que obtuve en la consola es este error:

[Advertencia de Vue]: error en la devolución de llamada para el observador "regalsTotalNumber": "Error de tipo: esto no está definido"

No entiendo por qué hay un error si simplemente me refiero al elemento data() usando this . Para que mi código funcione, debe descomentar el código en este método (y comentar las líneas que no funcionan). Todo comienza con la asignación de elementos de data a la variable:

 var size = this.size;

No entiendo por qué necesito hacer una variable y asignarle this.size en lugar de usar this explícitamente en mi método. Misma situación con var tiles = this.thetiles en el mismo método (también necesito asignarlo a var para que funcione en este método).

El método addRegals se activa en el watcher . Tal vez aquí hay un problema?

PD. Escriba '120' como largo, '55' como ancho en los campos de entrada (espere unos segundos para mostrar la cuadrícula en una pantalla), luego escriba algún número en el campo 'Número de Regals'.