Olá,

Procurando uma maneira simples de implementar a funcionalidade ***click-outside*** no elemento, encontrei esta [`directive`][1]. Alias, não achei outra maneira se não por diretivas.

Abaixo está uma adequação da `directive` para `ES5` e mais algumas modificações.

    Vue.directive('click-out', {
      bind: function(element, binding, node) {
        // verifica se o parametro da diretiva é diferente de um objeto do tipo function.
        if(typeof binding.value !== 'function') {
          var component = node.context.name;
          var text = '[Vue-click-out:] a expressão informada deve ser uma função';
          if(component) {
            text += ' Component: ' + component;
          };
          console.warn(text);
        };
        // cria o evento e atribui ao elemento
        var bubble = binding.modifiers.bubble;
        var handler = function(evt) {
          if(bubble || (!element.contains(evt.target) && element !== evt.target)) {
            binding.value(evt);
          };
        };
        element.__vueClickOutside__ = handler;
        // adiciona o evento que trata os cliques fora do component
        document.addEventListener('click', handler);
      },
    
      unbind: function(element) {
        // remove o evento que trata cliques fora do componente
        document.removeEventListener('click', element.__vueClickOutside__);
        element.__vueClickOutside__ = null;
      }
    });

#Implementação

Registrando a diretiva acima em seu código, um exemplo de utilização ficará assim:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    Vue.directive('click-out', {
      bind: function(element, binding, node) {
        // verifica se o parametro da diretiva é diferente de um objeto do tipo function.
        if (typeof binding.value !== 'function') {
          var component = node.context.name;
          var text = '[Vue-click-out:] a expressão informada deve ser uma função';
          if (component) {
            text += ' Component: ' + component;
          };
          console.warn(text);
        };
        // cria o evento e atribui ao elemento
        var bubble = binding.modifiers.bubble;
        var handler = function(evt) {
          if (bubble || (!element.contains(evt.target) && element !== evt.target)) {
            binding.value(evt);
          };
        };
        element.__vueClickOutside__ = handler;
        // adiciona o evento que trata os cliques fora do component
        document.addEventListener('click', handler);
      },

      unbind: function(element) {
        // remove o evento que trata cliques fora do componente
        document.removeEventListener('click', element.__vueClickOutside__);
        element.__vueClickOutside__ = null;
      }
    });

    var navList = new Vue({
      el: '#app',
      data: function() {
        return {
          visible: false
        }
      },
      methods: {
        show: function() {
          this.visible = !this.visible;
        },
        hide: function() {
          this.visible = false;
        }
      }
    })

<!-- language: lang-css -->

    .dropdown {
      display: none;
    }

    .dropdown.active {
      display: block;
    }

<!-- language: lang-html -->

    <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
    <div id="app">
      <ul>
        <li>Home</li>
        <li @click="show" v-click-out="hide">
          Products
          <ul class="dropdown" :class="{active: visible}">
            <li>Product 1</li>
            <li>Product 2</li>
          </ul>
        </li>
        <li>About us</li>
      </ul>
    </div>

<!-- end snippet -->

Basicamente você tem o `v-bind` ou `:` para `class` verificando se `visible` é verdadeiro (`true`) e atribuindo a class `.active` se for o caso. Também o `v-on` ou `@` para o evento `click`, atribuindo pelo método `show`, `true` ou `false` (o contrário do valor atual na propriedade) a `visible` e a `directive` `v-click-out`, atribuindo pelo método `hide`,  `false` a `visible`.

#Teste

    ...<li @click="show" v-click-out="visible = true">...

[![inserir a descrição da imagem aqui][2]][2]

No caso desta diretiva é possível somente informar um método para execução, porém você pode adequá-la para receber uma expressão do [VueJS][3].

#Informações

Mais sobre `custom directives` (diretivas) no VueJS 2.x [aqui][4].


  [1]: https://jsfiddle.net/Linusborg/Lx49LaL8/
  [2]: https://i.sstatic.net/EI6ST.png
  [3]: https://vuejs.org/
  [4]: https://vuejs.org/v2/guide/custom-directive.html