title: Why are API requests being made to the wrong URL (Vue.js 2)?
body: <p>I'm fooling around trying to learn stuff (Vue.js 2 with routing) and I was wondering why whenever I was on any other routes other than the home ('/') route, said localhost url gets prepended to the appropriate url when making API calls. An example would be the following: </p>
  
  <pre><code>const url = `'https://www.reddit.com/r/'${ this.sub }/.json?limit=10'`; // this.sub being the corresponding subreddit string
  </code></pre>
  
  <p>which results in something like this:</p>
  
  <p>'<a href="http://localhost:5000/subreddits/politics/https://www.reddit.com/r/politics/.json?limit=10" rel="nofollow noreferrer">http://localhost:5000/subreddits/politics/https://www.reddit.com/r/politics/.json?limit=10</a>'</p>
  
  <p>Below is the relevant code: </p>
  
  <pre><code>&lt;script&gt;
      export default {
          data() {
              return {
                  sub: this.$route.params.sub,
                  posts: [],
              }
          },
          watch: {
              '$route'(to, from) {
                  this.sub = to.params.sub;
              }
          },
          methods: {
            fetchPosts: async function () {
              const url = `'https://www.reddit.com/r/'${ this.sub }/.json?limit=10'`;
              try {
                const res = await (await fetch(url)).json();
                this.posts = await (res.data.children);
              } catch(err) {
                console.error(err);
              }
            }
          },
          mounted() {
            this.fetchPosts();
          },
      }
  &lt;/script&gt;
  </code></pre>