title: Changing a button to say "Loading" with a loading animation on click
body: <p>I have created a Vue button that displays "Load More" and then "Loading..." when clicked and loading more content. But, I would now like to add another component being a loading animation next to the "Loading." The button works completely fine, but I just would like to add that animation alongside the word "loading."</p>
  
  <p>I have tried using Vue's ref tag, but have not had much luck in successfully using that in my method.</p>
  
  <p>Loader.vue:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div
      ref="sdcVueLoader"
      class="sdc-vue-Loader"
    &gt;
      Loading...
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'Loader'
  &lt;/script&gt;
  </code></pre>
  
  <p>App.vue: </p>
  
  <pre><code>&lt;Button
    :disabled="clicked"
    @click="loadMore"
  &gt;
    {{ loadMoreText }}
  &lt;/Button&gt;
  
  &lt;script&gt;
  import Button from './components/Button'
  import Loader from './components/Loader'
  
  export default {
    name: 'ParentApp',
    components: {
      Button,
      Loader
    },
    data () {
      return {
        loadMoreText: 'Load More',
        clicked: false
      }
    },
    methods: {
      loadMore () {
        if ... {
          this.page += 1
          this.loadMoreText = 'Loading...' + this.$refs.sdcVueLoader
          this.clicked = true
          this.somerequest().then(resp =&gt; {
            this.clicked = false
            this.loadMoreText = 'Load More'
          })
          return this.loadMoreText
        }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I am hoping for the button to continue working as it is now, but now to also have the "Loader" component displaying next to "Loading..." when the button is clicked in the app.vue loadMore method.</p>