Vueコンポーネント内のthis地獄をどうにかしたい

Question

Vueの単一ファイルコンポーネントでcanvasアニメーションを作ろうとしています。
アニメーションで使用する変数(コンポーネント内で使い回す)は全てdataに書いているんですが、thisばかり使うthis地獄になってしまいます。

export default {
  data() {
    ctx: {},
    stage: {},
    particles: [],
    hoge: {},
    piyo: {},
    fuga:{},
  },
  methods(){
    render(){
      this.ctx.clearRect(0, 0, this.stage.width, this.stage.height);
      this.ctx.fillStyle = 'rgba(255,255,255,1)';
      this.ctx.strokeStyle = 'rgba(255,255,255,1)';
      this.ctx.lineWidth = 1;
      this.hoge = this.piyo.x + ~~~~
      this.fuga = this.hoge.y + ~~~~
    }
  }
}

thisを省略して書く記法なんてあるのでしょうか？
もしくは、データバインドにほとんど関係無いアニメーションをごりごり書く場合はvueコンポーネント内に書かない方が良いのでしょうか？

Answer 1

いちおう with 文を使うことによって実現可能な気がしますが、strictモードが必要なES6モジュールとは相性悪い気がします。

with - JavaScript | MDN

const ctx = this.ctxとすれば、thisが少しだけは消えますが……