title: Vue 3 component - trying to call AJAX
body: <p>I am trying to use Vue to make a bootstrap modal dynamic...</p>
  <p><strong>Component HTML:</strong></p>
  <pre><code> &lt;div id=&quot;commentList&quot;&gt;
       &lt;comment-list
           v-for=&quot;comment in comments&quot;
           :key=&quot;comment.id&quot;
           :content=&quot;comment.content&quot;
       &gt;&lt;/comment-list&gt;
   &lt;/div&gt;
  </code></pre>
  <p><strong>JS</strong></p>
  <pre><code>&lt;script&gt;
   const app = Vue.createApp({
          data() {
              return {
                  comments: []
              };
          },
          created () {
              this.fetchComments();
          },
          methods: {
              fetchComments: function () {
                  $.ajax({
                      url: '/activity/head/52',
                      method: 'GET',
                      success: function (data) {
                          this.comments = data;
                      }
                  });
              }
          }
      });
  
      app.component('comment-list', {
          props: ['content'],
          delimiters: ['{:', ':}'],
          template:
              `
                  &lt;div class=&quot;row my-4&quot;&gt;
                      &lt;div class=&quot;col-1&quot;&gt;&lt;img src=&quot;/photo-alex.jpg&quot; class=&quot;rounded-circle&quot; style=&quot;width:38px; height: 38px&quot;&gt;&lt;/div&gt;
                      &lt;div class=&quot;col-11 p-3 text-muted rounded bg-white border&quot;&gt;
                          {:content:}
                      &lt;/div&gt;
                  &lt;/div&gt;
              `
      });
  
      app.mount('#commentList');
  &lt;/script&gt;
  </code></pre>
  <p>The AJAX request isn't being executed, so that's the first issue I am encountering, thoughts?</p>
  <p>AJAX response:</p>
  <pre><code>[
    {
      id: 76,
      ago: &quot;in 4 hours&quot;,
      user: &quot;Alex&quot;,
      content: &quot;THIS IS A COMMENT&quot;
    }
  ]
  </code></pre>