title: Clear bootstrap modal's body on hidden
body: <p>I have a Nuxt App that uses bootstrap vue. </p>
  
  <p>I have a re-usable component for Modal </p>
  
  <p><strong>components/BaseModal.vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;b-modal id="base_modal" :title="title" size="md" @hidden="hide"&gt;
      &lt;slot name="body"&gt;&lt;/slot&gt;
      &lt;hr&gt;    
      &lt;BaseButton class="btn" variant="outline-secondary" @click="close" buttonText="Cancel"/&gt;      
      &lt;slot name="footer"&gt;&lt;/slot&gt;
    &lt;/b-modal&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'BaseModal',
    props: {
      title: { type: String, required: true },
      size: { type: String, default: "lg" }
    }, 
    methods: {  
      close() {
        this.$root.$emit('bv::hide::modal', 'base_modal');
      }, 
      hide() {
        // Clear slot body contents here
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>I invoke this component by rendering html elements using named scopes:</p>
  
  <pre><code>&lt;template&gt;
    &lt;BaseButton @click="showModal" buttonText="Show Modal"/&gt;
  
    &lt;BaseModal title="Add Recommendation" size="md"&gt;
      &lt;div slot="body"&gt;
        &lt;b-form @submit.prevent="submit" autocomplete="off"&gt;
          &lt;b-card-body&gt;
            &lt;b-row&gt;
              &lt;b-col&gt;&lt;BaseTextInput v-model.trim="name" label="Headline"/&gt;&lt;/b-col&gt;
            &lt;/b-row&gt;
          &lt;/b-card-body&gt;
        &lt;/b-form&gt;
      &lt;/div&gt;
      &lt;BaseButton class="float-right btn" variant="outline-primary" @click="submit" buttonText="Save" slot="footer"/&gt;
    &lt;/BaseModal&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      name: 'FormInput',
      data() {
        return {
          name: ""
        } 
      },
      methods: {
        showModal: {
          this.$root.$emit('bv::show::modal','base_modal');
        },
        submit() {
          // dispatch creation
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>How can I reset/clear the contents of modal's body when <strong>hidden</strong>, so that when I trigger the showModal it will re-render the content again?</p>