vue click bind

click.vue

<!-- layout -->
<template>

    <router-link to="/">

        <div class="mw-grid debug">
          test
          <img v-bind:class="{ triggerActive: move }" @click="move = !move" class="debug center" src="http://i.imgur.com/JQaaf8q.jpg" alt="">
        </div>

    </router-link>
    
    <!-- <div class="colophon-trigger f-sm uc" @click="$event.target.classList.toggle('red')">colophon</div> -->

</template>


<!-- styles -->
<style lang="scss" scoped>
  @import '../../utilities/breakpoints';
  @import '../../utilities/variables';
  @import '../../utilities/utilities';
  @import '../../utilities/typography';

  .center {
    position: absolute;
    left: 50%;
    transform: translateX(-30%);
    transition: $ease;
  }

  .triggerActive { transform: translateX(0); }

</style>


<!-- logic -->
<script>
  // import year from './components/calendar'

  export default {
    name: 'test',
    // components: { year }
    data() {
      return {
        move: false,
      };
    },
  }
</script>