How to add canvas and ctx variable to data in Vue to use them in different methods?

Question

Vue.js

I use canvas, I don’t see ctx and canvas in the methods. Help

<template>
  <canvas id="canvas" ref="renderCanvas" width="300" height="300">canvas</canvas>
</template>

<script>
module.exports = {
  data: function () {
    return {
      canvas: 'canvas'
    }
  },
  methods: {
    // тут инициализация самых функций
    // Пишешь всё что связано с канваос, обращаться через ref
    // Пиши тут функции где будет спедоментр этот, я вызов функции этого компонента из родительского я сам скажу как.
    updateCanvas: function () {
      // вот тут денчик канвас на js рисовать
      let canvas = this.$refs.renderCanvas
      let ctx = canvas.getContext('2d')
      ctx.beginPath()
      ctx.moveTo(75, 50)
      ctx.lineTo(100, 75)
      ctx.lineTo(100, 25)
      ctx.fill()
    },
    editCanvas: function () {
      // вот тут денчик канвас на js рисовать
      let canvas = this.$refs.renderCanvas
      let ctx = canvas.getContext('2d')
      ctx.beginPath()
      ctx.moveTo(75, 50)
      ctx.lineTo(100, 35)
      ctx.lineTo(110, 25)
      ctx.fill()
    }
  },
  mounted: function () {
    this.updateCanvas()
    // тут функции при запуске страници которые будут выполняться
  }
}
</script>

Answer 1

Some separate property for the canvas itself is not needed - it is available via ref.
Context - get after mounting:

data: () => ({
  ctx: null,
}),
mounted() {
  this.ctx = this.$refs.canvas.getContext('2d');
},

Well, use it:

methods: {
  updateCanvas() {
    const { ctx } = this;
    ...