I am trying to bind a generated link to a button. The link is generated based on parameters passed in the URL. The code roughly looks like this:

      <a :href="generated_link">
        <button
          type="button"
          class="button"
        >
          Go to Link
        </button>
      </a>

The code to generate the link:

mounted() {

let route_variables = {
  cmpid: this.$route.query.cmpid,
  utm_source: this.$route.query.utm_source,
};

if (route_variables["cmpid"] === undefined) {
  console.log(route_variables["cmpid"]);
  route_variables["cmpid"] = "2983928372983";
}

var newLink = "https://www.website/?";
for (const property in route_variables) {
  if (route_variables[property] != undefined) {
    newLink += property + "=" + route_variables[property] + "&";
  }
}
this.generated_link = newLink;
},

In development, the link is populated properly. When I add a cmpid variable to the URL then it is appended to the button link as expected. In deployment, however, the cmpid variable is always set to the value I have set as the default when there is no variable in the URL, even when I add it to the URL. I think that this is because it is being evaluated in build time. If I just use ((generated_link}} to print the link on the page it works fine. I have tried a bunch of different workarounds to try to get the a tag to render client-side to no avail. Any help would be greatly appreciated!