[Vuejs]-How to trigger modals conditionally with vue.js

Use v-if instead of v-show will solve your problem

<div v-if="addon">
  <div class="modal fade" id="addon_modal" tabindex="-1" role="dialog">
     <div class="modal-dialog"> 
        <div class="modal-content">
            <div class="modal-header">
               <h4 class="modal-title text-center">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>List of add-ons here</p>
            </div>
            <div class="modal-footer">
                //buttons to add add-ons to cart and to dismiss modal here
            </div>
        </div>
      </div>
    </div>
</div>

Demo https://jsfiddle.net/ittus/k91kcd9x/1/

If you use jquery, you can open modal programmatically