Problem with events in VueJS 2

I found a code at a time and modified it in pure javascript. It worked right. But now I have to do something similar to what he does in vue. The problem is that I'm half-new in the vue and have little time to finish.

NOTE: Basically the functionality of the code is to draw freely on the canvas as if it were the paint. Inside the object you have some other things related to the cadastre, because this functionality is part of a registration form, but it is easy to identify what the canvas is about. I guess it's something I did against the rules of the library.

NOTE 2: The only problem really is the fact that no line is appearing when drawing, but js does not return any type of error.

HTML (this HTML code is within the registration element)

<div v-show="ativo == true" >
                    <div id="paint">
                        <span id="converter">Confirmar</span>
                         <span id="limpar">Limpar</span>
                         <span v-on:click="ativo = false" id="cancelar">Cancelar</span>
                         <canvas id="canvas" v-on:mousedown="evento1" v-on:mouseup="evento2"></canvas>
                    </div>
                </div>

Anyway, here is the code in pure js that works:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');


var painting = document.getElementById('paint');
var paint_style = getComputedStyle(painting);
canvas.width = parseInt(paint_style.getPropertyValue('width'));
canvas.height = parseInt(paint_style.getPropertyValue('height'));

var mouse = {x: 0, y: 0};

canvas.addEventListener('mousemove', function(e) {
  mouse.x = e.pageX - this.offsetLeft;
  mouse.y = e.pageY - this.offsetTop;
}, false);

ctx.lineWidth = 3;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = '#6f79ed';

canvas.addEventListener('mousedown', function(e) {
    ctx.beginPath();
    ctx.moveTo(mouse.x, mouse.y);

    canvas.addEventListener('mousemove', onPaint, false);
}, false);

canvas.addEventListener('mouseup', function() {
    canvas.removeEventListener('mousemove', onPaint, false);
}, false);

var onPaint = function() {
    ctx.lineTo(mouse.x, mouse.y);
    ctx.stroke();
};

And here's the vue object with the code inside that I tried, seemingly flawed, to convert to vue:

var cadastro = new Vue({
    el:'#cadastro',

    data:{
        pagina:0,
        titulo:["Dados Pessoais", "Endereço", "Curso"],
        nome: '',
        sobrenome: '',
        email:'',
        datanasc:'',
        rg:'',
        cpf:'',
        cep:'',
        logradouro:'',
        numero:'',
        complemento:'',
        bairro:'',
        cidade:'',
        estado:'',
        pais:'',
        opcao1:'',
        unidade1:'',
        opcao2:'',
        unidade2:'',
        mouse: {x:0, y:0},
        canvas: document.getElementById('canvas'),
        ctx: document.getElementById('canvas').getContext('2d'),
        painting: document.getElementById('paint'),
        paint_style: getComputedStyle(document.getElementById('paint')),
        ativo:false
    },

    computed: {
        tituloAtual: function() {
            return this.titulo[this.pagina];
        },
    },

    methods:{
        passarPagina: function(e){
            e.preventDefault();
            this.pagina++;
        },

        voltarPagina: function(e){
            e.preventDefault();
            this.pagina--;
        },

        evento0: function(e){
            cadastro.ctx.lineWidth = 3;
            cadastro.ctx.lineJoin = 'round';
            cadastro.ctx.lineCap = 'round';
            cadastro.ctx.strokeStyle = '#6f79ed';
            cadastro.canvas.width = parseInt(cadastro.paint_style.getPropertyValue('width'));
            cadastro.canvas.height = parseInt(cadastro.paint_style.getPropertyValue('height'));


             cadastro.mouse.x = e.pageX - this.offsetLeft;
             cadastro.mouse.y = e.pageY - this.offsetTop;
        },

        evento1: function(e){
            cadastro.ctx.lineWidth = 3;
            cadastro.ctx.lineJoin = 'round';
            cadastro.ctx.lineCap = 'round';
            cadastro.ctx.strokeStyle = '#6f79ed';
            cadastro.canvas.width = parseInt(cadastro.paint_style.getPropertyValue('width'));
            cadastro.canvas.height = parseInt(cadastro.paint_style.getPropertyValue('height'));



            cadastro.ctx.beginPath();
            cadastro.ctx.moveTo(cadastro.mouse.x, cadastro.mouse.y);
            cadastro.canvas.addEventListener('mousemove', cadastro.onPaint, false);
        },

        evento2: function(e){
            var canvas = document.getElementById('canvas');
            canvas.removeEventListener('mousemove', cadastro.onPaint, false);
        },

        onPaint : function(){
            cadastro.ctx.lineWidth = 3;
            cadastro.ctx.lineJoin = 'round';
            cadastro.ctx.lineCap = 'round';
            cadastro.ctx.strokeStyle = '#6f79ed';
            cadastro.canvas.width = parseInt(cadastro.paint_style.getPropertyValue('width'));
            cadastro.canvas.height = parseInt(cadastro.paint_style.getPropertyValue('height'));
            cadastro.ctx.lineTo(cadastro.mouse.x, cadastro.mouse.y);
            cadastro.ctx.stroke();
        },

        buscaCep: function(event){
            axios.get('http://api.postmon.com.br/v1/cep/'+this.cep )
              .then(function(response){
                cadastro.complemento = response.data.complemento;
                cadastro.bairro = response.data.bairro;
                cadastro.logradouro = response.data.logradouro;
                cadastro.estado = response.data.estado_info.nome;
                cadastro.cidade = response.data.cidade;
              }); 
        }
    }
});