Why is there an error about rendering the Vue template?

Question

Vue.js

<table class="table table-bordered tablesorter" id="packsTable">
      <thead>
        <tr class="table-head">
          <th scope="col">Id</th>
          <th scope="col">Courier</th>
          <th scope="col">Track</th>
        </tr>
      </thead>
      <tbody id="packs-table">
      	<tr class='table-content' v-for="pack in packs">
            <td>{{pack.id}}</td>
            <td>{{pack.courier}}</td>
            <td v-if="(pack.courier == 'Fedex')">
                  <a :href="'http://www.fedex.com/Tracking?sum=n&ascend_header=1&clienttype=dotcom&spnlk=spnl0&initial=n&cntry_code=us&tracknumber_list=' +pack.track_number + '&language=english&track_number_0=' + pack.track_number + '&track_number_replace_0=' + pack.track_number" target='_blank'>{{pack.track_number}}</a>
            </td>
            <td v-else-if="(pack.courier == 'UPS')">
                  <a :href="'http://wwwapps.ups.com/etracking/tracking.cgi?TypeOfInquiryNumber=T&InquiryNumber1=' + pack.track_number + '&commit=Track%21" target='_blank'>pack.track_number</a>
            </td>
            <td v-else>{{pack.track_number}}</td>		
      	</tr>

      </tbody>
    </table>

Full code:
https://codepen.io/anon/pen/GGPmZO
An error occurs when using :href and I need to use :href to generate links. If you do not bind and use href with hardcode, then everything is in order. How to generate links?
Mistake:

vue.js:597 [Vue warn]: Failed to generate render function:
SyntaxError: Unexpected identifier in
(found in )

Answer 1

<a :href="'http://wwwapps.ups.com/etracking/tracking.cgi?TypeOfInquiryNumber=T&InquiryNumber1=' + pack.track_number + '&commit=Track%21"

Quote at the end?