乱暴なやり方だと思っていて、他にいい方法があるか知りたい。
そもそもこういうことをやらないといけない設計に問題があるのかもしれない。

とあるテンプレート内で、自身のプロパティが保有するモデルインスタンスのメソッドをコールし、
その戻り値をテンプレート内で何度も繰り返し利用したくなった。
テンプレートを利用せず、renderメソッドを利用すれば解決できるんだけど、
テンプレートの記述量が多く、これをメソッドに落とすのはとてもしんどいし
可読性がしこたま悪くなる。
かといって、vueでは以下のようなテンプレート内での変数定義ができなさそう。

<template>
  <div v-for="item in items" :key="item.id">
    {{var hoge = model.getSomeValueByItemId(item.id)}}

    <p>{{hoge}}</p>
    <p>{{hoge * 2}}</p>
    <p>{{hoge * 3}}</p>
  </div>
</template>

そこで仕方なく、「thisのメンバとして、一時変数的に入れちゃえばいいや。dataの中に入ればければ値のプロキシも発生しないしインパクトも少なかろう、、」、と
以下のようなことをやってみた。

<template>
  <div v-for="item in items" :key="item.id">
    {{_hoge = model.getSomeValueByItemId(item.id)}}

    <p>{{_hoge}}</p>
    <p>{{_hoge * 2}}</p>
    <p>{{_hoge * 3}}</p>
  </div>
</template>

すると、代入している箇所で戻り値がそのままレンダリングされてしまった。そりゃそうだ。

で、以下のようにした。

{{(_hoge = model.getSomeValueByItemId(item.id)) && null}}

こうするとレンダリング対象の変数は必ず一番右辺のnullになる。

やっておきながら、これだとテンプレート箇所になんだかよくわからんスキーマが隠れちゃって危ない気もしていて
こういう時にrenderメソッド利用時のように、templateタグや、v-forのブロックの中だけをスコープとした変数の定義ができるようにして欲しい。
テンプレートはできるだけプログラムチックな記述をさせないぞ、というvueの思想なのかなあ。