请教一个vuejs事件的问题

比如我有一个input，该如何用vuejs监听鼠标点中input和离开input呢？

<div class="group">
    <input class="input">
</div>

当点击这个input时，在group上加上class an，鼠标离开当前input时移除这个an class

---

简单写了个例子，稍微修改一下吧。

<div class="group">
    <input v-on:click="doClick()" v-on:mouseout="doMouseout()" class="input">
</div>
<script>

var el_input = new Vue({
  el: '.group',
  methods: {
      doClick: function() {
          console.log('click');
      },
      doMouseout: function() {
          console.log('mouseout');
      }
  }
})

</script>