I'm new to Vue.js and I struggle with modals. I want to first load the modal window as a user navigates to a certain component. I tried to create some example modal and it opens if I click a button and trigger $('#modalId').modal('show'). But when I try to execute the same command from Vue's created () {...} It does not open a modal window. I don't want to open a modal window with a button click, I want to open as page/component loads.

    <!-- This works fine -->

    <button class=btn btn-dark @click=openModal data-target=#loginModal>Open modal</button>



    <!-- MODAL -->

    <div class=modal ref=modal id=loginModal data-keyboard=false data-backdrop=static>

      <div class=modal-dialog>

        <div class=modal-content>

          <div class=modal-header>

            <h5 class=modal-title>Insert required data</h5>

          </div>

          <div class=modal-body>

            <form>

              <div class=form-group>

                <label for=username>Username</label>

                <input type=text class=form-control>

              </div>

            </form>

          </div>

          <div class=modal-footer>

            <button class=btn btn-primary data-dismiss=modal>Submit</button>

            <a href=# @click=logout data-dismiss=modal>

              <span>{{ $t('pages.userIconInHeader.signOut') }}</span>

            </a>

          </div>

        </div>

      </div>

    </div>



...



export default {

  name: 'test',

  data () {

    return {}

  },

  created () {

    // HERE I WOULD LIKE TO OPEN MODAL. If it's even possible?

    $(document).ready(function () {

      this.openModal()

    })

  },

  methods: {

    openModal () {

      $('#loginModal').modal('show')

    },



...