title: jQuery and Vue.js: AutoComplete is not a function
body: <p>I am trying to add a autocomplete field by using jQuery UI to my Vue.js project.</p>
  <p>Here is my approach so far. In my template I have:</p>
  <pre><code>&lt;div class=&quot;ui-widget&quot;&gt;
    &lt;label for=&quot;tags&quot;&gt;Tags: &lt;/label&gt;
    &lt;input id=&quot;tags&quot; /&gt;
  &lt;/div&gt;
  </code></pre>
  <p>In my script I have:</p>
  <pre><code>   &lt;script&gt;
    import httpVueLoader from 'http-vue-loader'
    import $ from 'jquery'
    import 'jquery-ui';
    
    export default {
      name: 'ResultList',
      components: {
        'ResultItem': httpVueLoader(window.__env.config.HTML_TEMPLATE)
      },
      props: {
        results: Object,
        showAllResults: Boolean,
       },
      watch: {
        results: function () {
          this.refresh_key++
        }
      },
      data: function () {
        return{
          refresh_key:0
        }
      },
      computed: {
        num_results: function(){
          if(this.showAllResults){
              return window.__env.config.NUM_ALL_RESULTS;
          } else {
              return window.__env.config.NUM_PREVIEW_RESULTS;
          }
        }
      },
      mounted: function() {
  
      
         $(document).ready(function(){
             $(function(){
                  console.log(&quot;Version would be: &quot; + $().jquery);
  
                  var availableTags = [
                &quot;ActionScript&quot;,
                &quot;AppleScript&quot;,
                &quot;Asp&quot;,
                &quot;BASIC&quot;,
                &quot;C&quot;,
                &quot;C++&quot;,
                &quot;Clojure&quot;,
                &quot;COBOL&quot;,
                &quot;ColdFusion&quot;,
                &quot;Erlang&quot;,
                &quot;Fortran&quot;,
                &quot;Groovy&quot;,
                &quot;Haskell&quot;,
                &quot;Java&quot;,
                &quot;JavaScript&quot;,
                &quot;Lisp&quot;,
                &quot;Perl&quot;,
                &quot;PHP&quot;,
                &quot;Python&quot;,
                &quot;Ruby&quot;,
                &quot;Scala&quot;,
                &quot;Scheme&quot;
              ];
              $(&quot;#tags&quot;) . autocomplete ({
                source: availableTags
              });
  
            });
        });
  
  
      
     
      }
  
      
    }
  &lt;/script&gt;
  </code></pre>
  <p>What went wrong? I am constantly getting the error:</p>
  <p><strong>.autocomplete' is undefined) (2)</strong>
  Any help is appreciated!
  I wrapped the autocomplete function into a document.ready function but it doesn't help.</p>
  <p>When I check separately if the autocomplete function exists it throws that it doesn't.</p>
  <pre><code>if ($.fn.autocomplete) {
                console.log(&quot;autocomplete exists&quot;);
            } else {
              console.log(&quot;autocomplete not found&quot;);
            }
  </code></pre>