[Vuejs]-Vuejs Fetch Request returns data but attributes assignments don't work

The data for packages should be working fine. The problem I see in your code is with the following html:

<label>
   <input type='radio' name='packageradio' v-bind:value="package.id">
   {{ package.quantity }}
   <span id='price-tag'>{{ package.price }}</span>
</label>

From the documentation for the label element:

label can permit the Phrasing content, but no descendant label elements. No labelable elements other than the labeled control are allowed.

So, in your code having input a flow content is the key issue.

The issue with your code is:

.then(function(res){
   alert("i am hit");
   this.packages = res; 
   // this isn't referenced to the vue instance from the function scope
 })

Replace it with this:

.then(res => { // access parent scope
   alert("i am hit");
   this.packages = res; // now, this will access the vue instance
 })

I think its to do with your this keyword so, either use the ES5 syntax or do some thing like this

fetchPackages: function(){
       var vm = this
        fetch('/die-cut/size/4/packages')
            .then(res => res.json())
            .then(function(res){
                alert("i am hit");
                vm.packages = res;
            })
            .catch(err => console.log(err));
    }

Or off course you can go ahead and do something like this,

fetchPackages(){
        fetch('/die-cut/size/4/packages')
            .then(res => res.json())
            .then((res) => {
                alert("i am hit");
                this.packages = res;
            })
            .catch(err => console.log(err));
    }