Vue.js：Vueアプリケーション内のCanvas要素に画像を表示させたい

Question

前提・実現したいこと

Vueアプリケーション内にCanvasタグを設置して、描画のテストをしています。
そのCanvas内に、fillRect()などで図を描画することはできました。次に、そのCanvas内にPNG画像を配置したいと考えています。

発生している問題

すでにアップロードしてある画像データ（imgフォルダ内）をCanvas描画させようとしているのですが、以下のコードでは描画されません。
onload内のコンソールログが表示されないので、ここの記載が間違っているようです。
どうか、ご教示のほど、よろしくお願いします。
※HTML、bodyタグなどは省略しています。

<div id="app">
    <canvas id="canvas" width="320" height="320" ref="canRef"></canvas>
<div>

<script>
    new Vue({
        el: '#app',
        data: {
            canvas: null,
            ctx: null,
            img: null,
            src: null
        },
        mounted: function() {
            this.canvas = this.$refs.canRef
            this.ctx = this.canvas.getContext('2d')
            this.src = 'img/tomato.png'
            this.img = new Image()
            this.img.onload = function() {
                console.log('loaded')
                this.ctx.drawImage(this.img, 0, 0);
            }
        }
    })
</script>

Answer 1

自己解決しましたので、解決方法を記載します。
まず、this.srcとしていましたが、this.img.srcの間違いでした。また、この行の記載位置もnew Image()の後に書かなければいけませんでした。
これで、onloadはできたのですが、この中のthis.ctxでエラーが表示されました。これは、thisの参照が間違っていたからだと思います。mountedの最初にthisを変数に代入することで、すべて解決できました。
以下に修正部分の全コードを記載します。どなたかのお役に立てば幸いです。

<script>
    new Vue({
        el: '#app',
        data: {
            canvas: null,
            ctx: null,
            img: null
            // srcを削除
        },
        mounted: function() {
            let self = this // thisを変数に代入
            self.canvas = self.$refs.canRef
            self.ctx = self.canvas.getContext('2d')
            // srcの前にself.imgをつけて、new Image()の後に移動
            self.img = new Image()
            self.img.src = 'img/tomato.png'
            self.img.onload = function() {
                console.log('loaded')
                // thisをselfに代入したことで、エラーが出ない
                self.ctx.drawImage(self.img, 0, 0);
            }
        }
    })
</script>

Answer 2

参考なりました。
自分の場合はwidthとかの記述追加しました。

let self = this
self.canvas = self.$refs.canRef
self.ctx = self.canvas.getContext('2d')

self.img = new Image()
self.img.src = '/camera.jpg'
self.img.onload = function() {
    console.log('loaded')
    // here
    self.ctx.canvas.width = window.innerWidth;
    self.ctx.canvas.height = window.innerHeight;
    self.ctx.drawImage(self.img, 0, 0);
}