HTML5から追加されたinputタグでレンジ入力欄というのがあります。この詳細について、ここでは割愛させていただきますが、度合いを調節できるインターフェースで、スライダーと言った方がピンとくるかもしれませんね。

このタグは以下のように描画されます。

cssのtransformを用いて、正方形のdiv要素を回転や拡大縮小させてみたいと思います。
以下のようにHTMLを準備してみます。

<div id="test1">
  <h3>回転させる</h3>
  <div class="square" v-bind:style="{ transform: 'rotate('+rotate+'deg)' }"></div>
  <p>{{ rotate }}</p>
  <input type="range" max="360" v-model="rotate">
  <h3>拡大・縮小させる</h3>
  <div class="square" v-bind:style="{ transform: 'scale('+scale+')' }"></div>
  <p>{{ scale }}</p>
  <input type="range" max="1.5" step="0.1" v-model="scale">
</div>

回転・拡大縮小それぞれのレンジ入力欄（スライダー）と正方形のdiv要素を置いてます。
v-bind:style部分でレンジ入力欄（スライダー）の値をバインディングさせています。これにより、レンジ入力欄（スライダー）が動くとrotateやscaleが動的に変わります。

Vue.jsは以下のようにしてみましょう（といっても各データの初期値設定しているぐらいですが…）。

new Vue( {
  el: '#test1',
  data: {
    rotate: 0,
    scale: 1
  }
} )

実際にレンジ入力欄（スライダー）を動かして動作を確認してみましょう！