jQuery and Vue.js: AutoComplete is not a function

Question

I am trying to add a autocomplete field by using jQuery UI to my Vue.js project.

Here is my approach so far. In my template I have:

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" />
</div>

In my script I have:

   <script>
  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("Version would be: " + $().jquery);

                var availableTags = [
              "ActionScript",
              "AppleScript",
              "Asp",
              "BASIC",
              "C",
              "C++",
              "Clojure",
              "COBOL",
              "ColdFusion",
              "Erlang",
              "Fortran",
              "Groovy",
              "Haskell",
              "Java",
              "JavaScript",
              "Lisp",
              "Perl",
              "PHP",
              "Python",
              "Ruby",
              "Scala",
              "Scheme"
            ];
            $("#tags") . autocomplete ({
              source: availableTags
            });

          });
      });


    
   
    }

    
  }
</script>

What went wrong? I am constantly getting the error:

.autocomplete' is undefined) (2) Any help is appreciated! I wrapped the autocomplete function into a document.ready function but it doesn't help.

When I check separately if the autocomplete function exists it throws that it doesn't.

if ($.fn.autocomplete) {
              console.log("autocomplete exists");
          } else {
            console.log("autocomplete not found");
          }