geocomplete with vue

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&amp;key=AIzaSyCspgVlNqoa887cssVbYN4KwHfO1m5miyM"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.js"></script>
<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/leaflet.css">
<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-focus/2.1.0/vue-focus.js"></script>
  <body>
      <div id="app">
          <!--
               MODAL TEMPLATE
             -->
          <modal id="post-modal" v-show="post" :newarticle="newarticle" :newoffer="newoffer">
              <div slot="info">
                  <h3>post to: <span v-show="articleShow"><em>news</em></span><span v-show="offerShow"><em>offers</em></span></h3>
              </div>
              <div slot="inputs">
                  <div id="choose" v-show="!offerShow && !articleShow">
                      <div class="row">
                          <button class="btn btn-lg btn-success btn-block" id="post-article" v-on:click.prevent="postArticle">news</button>
                      </div>
                      <div class="row">
                          <button class="btn btn-lg btn-success btn-block" id="post-offer" v-on:click.prevent="postOffer">offers</button>
                      </div>
                  </div>
                  <div id="offer-inputs" v-show="offerShow">
                      <label for="get-offer-name">name: </label><input id="get-offer-name" v-model="newoffer.name" class="form-control" type="text"/>
                      <label for="get-offer-tags">tags:...

CSS

body h1 {
    font-family: Cormorant Garamond, Times New Roman, serif;
    color: white;
    font-size: 22px;

}

#app {
    height: 100%;
    width: 100%;
    position: absolute;
}

#front-page {
    position: absolute;
    height: 100%;
    width: 63%;
    left: 0px;
    border-color: white;
    border-thickness: 2px;
    background: rgba(255, 255, 255, 0.5);    

}

#top {
    position: absolute;
    height: 15%;
    width: 100%;
    top: 0px;
    left: 0px;
}

#tags {
    position: absolute;
    height: 20%;
    width: 100%;
    top: 0px;
    background: rgba(0, 0, 0, 0.2);
}

#banner {
    position: absolute;
    height: 80%;
    width: 100%;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.9);
}

#title {
    position: absolute;
    top: 0px;
    left: 10px;
    padding-bottom: 10px;
    
}

#content {
    position: absolute;
    height: 85%;
    width: 100%;
    bottom: 0px;

}

.disabled {
  color: orange;
}
#side-bar {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 37%;
    right: 0px;
}

#side-top {
    position: absolute;
    height: 37%;
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    top: 0px;
}

#top-left {
    position: absolute;
    height: 100%;
    width: 37%;
    background: white;
    left: 0px;
}

#profile {
    position: absolute;
    height: 63%;
    width: 100%;
    top: 0px;
    background-color: grey;
}

#log-in {
    

}

.pac-container {
    z-index: 9999;
}

#find {
    position: absolute;
    height: 37%;
    width: 50%;
    bottom: 0px;
    left: 0px;
    background-color: black;
    text-align: center;    
}

#post {
    position: absolute;
    height: 37%;
    width: 50%;
    bottom: 0px;
    right: 0px;
    background-color: black;
    text-align: center;

}

.cost {
    text-align: center;
}

#top-right {
    right: 0px;
    top: 0px;
    position: absolute;
    height: 100%;
    width: 63%;
    background-color: white;
}

#side-bottom {
    position: absolute;
    height:...

JavaScript

Vue.component('article-comp', {
    template: "#article-template",
    props: ['article'],
    data: function() {
        return {
            upvoted: false,
            downvoted: false
        };
    },
    methods: {
        upVote: function() {
            this.upvoted = !this.upvoted;
            this.downvoted = false;
         
        },
        downVote: function() {
            this.downvoted = !this.downvoted;
            this.upvoted = false;

        }
    },
    computed: {
        votes: function() {
            var votes = this.article.upVotes - this.article.downVotes;
            if (this.upvoted) {
                return votes + 1;
            } else if (this.downvoted) {
                return votes - 1;
            } else {
                return votes;
            }

        }
    }
});


Vue.component('modal', {
    template: "#modal-template",
    props: ['newtag', 'newoffer', 'newarticle']
});


Vue.component('offer', {
    template: "#offer-template",
    
});

Vue.component('tag', {
    templates: '<li><span class="tag tag-pill">{{ tag.name }}</span></li>',
    props: ['tag']
    
    
});


Vue.component('register', {
    template: "#register-template",
    props: ['newuser', 'registerComplete', 'registerShow'],
    methods: {
        register: function () {
           
            console.log("adding user");

        },
        close: function(){
            this.registerShow = false;
            
        }

    }
});

var vm = window.vm = new Vue({
    el: '#app',
    mixins: [ VueFocus.mixin ],
    data: {
        post: false,
        offerShow: false,
        articleShow: false,
        news: true,
        classifieds: false,
        newarticle: {
            postedBy: '',
            headline: '',
            link: '',
            postedBy: '',
            upVotes: 0,
            downVotes: 0,
            location: '',
            cost: ''
        },
        newoffer: {
            postedBy: '',
            name: '',              ...