[Vuejs]-Default Options for Prop in VueJS

I think you can make this a mixin:

@Component
class SizeMixin extends Vue {
    @Prop({default: "medium"}) readonly size!: Sizes;

    medium: string = "px-6 py-3";
    //...Sizes;
    get classList(){
       return this[this.size] || "";
    }
}

So yes you can use computed to return specific data value instead of evaluating in template.

Above I used class style component syntax

the usage would be

<template>
  <div :class="classList"></div>
</template>

@Component
class CustomComponent extends Mixins(SizeMixin){

  // override medium value
  medium = "px-3 py-3"
  
}

Use an object to map it:

// template
<button :class="sizemap[size]">Click Me</button>

data: function() {
  return {
    sizemap: {
      xsmall: "px-3 py-1",
      small: "px-4 py-2",
      medium: "px-6 py-3",
      large: "px-8 py-3",
      xlarge: "px-10 py-4"
    }
  }
}