[Vuejs]-Vue calling function in rendered template for modal

The easiest way would be to call a handler function. That function will be responsible of executing two lines of code, emit close event and call saveDetails function with the original event. You can do it in line or placing that handler in the methods. My personal preference is to avoid any logic on the template, just reference methods on it. Code will look like as follows.

new Vue({
el:'#app',
data: { 
    typeNames: [],
    siteNames: []
},
methods: {
    saveHandler(event) {
        this.$emit('close');
        this.saveDetails(event);
    },
    saveDetails: function(event){
        console.log(this.siteNames);
        console.log(this.typeNames); 
    }
}


<script type="text/x-template" id="add-modal-template">
  <transition name="addModal">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">
        <div class="uk-grid">

          <div class="modal_context uk-form-row uk-width-1-2">
            <slot name="site">
                <input type="checkbox" name='customeradded' value='customer'  v-modal="siteNames" data-md-icheck  />
                <label>Customer</label><br>
                <input type="checkbox" name='InternalSiteadded' value='InternalSite' v-modal="siteNames" data-md-icheck  />
                <label>InternalSite</label><br>
                <input type="checkbox" name='mixadded' value='mix' v-modal="siteNames" data-md-icheck  />
                <label>mix</label><br>
            </slot>
          </div>

          <div class="modal_type uk-form-row uk-width-1-2">
            <slot name="type">
                <input type="checkbox" name='marketingadded' value='marketing' v-modal="typeNames" data-md-icheck  />
                <label>marketing</label><br>
                <input type="checkbox" name='catalogadded' value='catalog' v-modal="typeNames" data-md-icheck  />
                <label>catalog</label><br>
            </slot>
          </div>

          <div class="modal-footer uk-form-row uk-width-1-1">
            <slot name="footer">
              <button class="modal-default-button" @click="$emit('close')">
                Cancel
              </button>
              <button class="modal-save-button" @click="saveHandler">
                Save
              </button>
            </slot>
          </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</script>

Despite this. I can see your code in incomplete and this will not work, because your Vue instance is not bind to that template. It does not exist such node with id="app". Looks like you want to emit close but I don’t understand who is the parent component listening to that close event.