title: Vue.js directive mounting component: Injection not found
body: <p>So I'm trying to write a directive that will append a custom <em>error</em> component to an element.  Instead having to write <code>&lt;i&gt;</code> and <code>&lt;span&gt;</code> for everything I vee-validate, I want to just use a directive to auto-append my error message component.</p>
  
  <p>Problem is, to get everything to use the same errorBag, I need to</p>
  
  <pre><code>@component({
    inject: {
      $validator: "$validator"
    }
  })
  </code></pre>
  
  <p>In my custom component.  This works fine when I add the component to a page manually.  However, using a directive to mount my component I get a:</p>
  
  <blockquote>
    <p>[Vue warn]: Injection "$validator" not found.</p>
  </blockquote>
  
  <p>Is there any way around this, or to make it work?</p>
  
  <hr>
  
  <pre><code>Vue.directive("test", {
    bind: function(el: any, binding: any, vnode: any){
      var instance = new error({
        propsData: { errorFor: el.id}
      })
      instance.$mount();
      el.after(instance.$el);
    }
  }
  </code></pre>