jquery geocomplete not working with vue js

Question

When I wrap a form with jquery geocomplete in a Vue modal, the geocomplete stops working. I'm not sure how to fix it so that geocomplete works when the modal is active.

Here is a working example without Vue or a modal: https://jsfiddle.net/3gzovugy/68/

Here is the same example, wrapped in the vue site's example modal, that won't geocode. Any suggestions? https://jsfiddle.net/3gzovugy/96/

<div id="app">
  <button id="show-modal" @click="showModal = true">Show Modal</button>
  <modal v-if="showModal" @close="showModal = false">
    <div slot="body">
      <form>
        <div class="item">
          <input id="autocomplete" placeholder="Look up your address" type="text">
        </div>
        <div class="item">
          <input class="cat_textbox" id="houseNo" data-geo="street_number" type="text" placeholder="House Number" maxlength="50" />
        </div>
        <div class="item">
          <input class="cat_textbox" id="street" data-geo="route" type="text" placeholder="street" maxlength="50" />
        </div>
        <div class="item">
          <input class="cat_textbox red" id="BillingAddress" data-geo="street_address" type="text" placeholder="Billing Address" maxlength="50" name="BillingAddress" />
        </div>
      </form>
    </div>

  </modal>
</div>


  <template id="modal-template">
    <transition name="modal">
      <div class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container">

            <div class="modal-header">
              <slot name="header">
                default header
              </slot>
            </div>

            <div class="modal-body">
              <slot name="body">
                default body
              </slot>
            </div>

            <div class="modal-footer">
              <slot name="footer">
                default footer
                <button class="modal-default-button" @click="$emit('close')">
                  OK
                </button>
              </slot>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </template>

Answer 1

I see your geocomplete related code is in $(document).ready(function(). Taking inspiration from this answer, you can move code inside document.ready to one of the lifecycle hooks for this purpose. You can try using mounted as it comes pretty close to $(document).ready():

Vue.component('modal', {
  template: '#modal-template',
  mounted () {
    $("#autocomplete").geocomplete({
    details: "form div",
    detailsAttribute: "data-geo",
    types: ["(cities)"],
    componentRestrictions: {
      country: "in"
    }
  });
  }
})

With these changes, you code starts to show suggestion: check here. You may need some other UI changes to see the geocomplete dropdown on top.