One option is to ensure that the sales type is in (or not in) a white list of types using Array.prototype.includes() - for example:

filteredSalesAgreementItems() {
  if (!['bricks', 'mortars'].includes(this.$route.query.salesType)) {
    return this.salesAgreementItems;
  }
  return this.salesAgreementItems.filter(obj => obj.department === this.$route.query.salesType);
}
subTitle() {
  if (!['bricks', 'mortars'].includes(this.$route.query.salesType)) {
    return 'All';
  }
  const type = this.$route.query.salesType;
  return type.charAt(0).toUpperCase() + type.subString(1);
},
title() {
  if (!['bricks', 'mortars'].includes(this.$route.query.salesType)) {
    return 'Bricks & Mortars';
  }
  const type = this.$route.query.salesType;
  return type.charAt(0).toUpperCase() + type.subString(1);
},

return this.$route.query.salesType.toTitleCase();

But as you can see, the computed properties repeats the same switch - is there a way to change all three properties in one switch statement so if I add further properties or switch cases, I do not have to do it multiple times?

One option is to ensure that the sales type is in (or not in) a white list of types using Array.prototype.includes()

A computed property for sales type could be added:

salesType() {
  return this.$route?.query?.salesType || '';
}

Notice it used the optional chaining operator ?. and logical OR || to gracefully fall back to an empty string in the event the query string does not contain that key, though maybe it should be handled differently.

Then that can be used to simplify the other methods. For example:

 filteredSalesAgreementItems() {
   switch (this.$route.query.salesType) {
     case 'bricks':
       return this.salesAgreementItems.filter(obj => obj.department === 'bricks');

     case 'mortars':
       return this.salesAgreementItems.filter(obj => obj.department === 'mortars');

     default:
       return this.salesAgreementItems;
   }
 }

Can be simplified to this:

filteredSalesAgreementItems() {
  if (!['bricks', 'mortars'].includes(this.salesType)) {
    return this.salesAgreementItems;
  }
  return this.salesAgreementItems.filter(
    obj => obj.department === this.salesType
  );
}

Similarly for subTitle:

subTitle() {
  if (!['bricks', 'mortars'].includes(this.salesType)) {
    return 'All';
  }
  return this.salesType.charAt(0).toUpperCase() + this.salesType.subString(1);
},

and for title:

title() {
  if (!['bricks', 'mortars'].includes(this.salesType)) {
    return 'Bricks & Mortars';
  }
  return this.salesType.charAt(0).toUpperCase() + this.salesType.subString(1);
},

return this.salesType.toTitleCase();

One option is to ensure that the sales type is in (or not in) a white list of types using Array.prototype.includes() - for example:

filteredSalesAgreementItems() {
  if (!['bricks', 'mortars'].includes(this.$route.query.salesType)) {
    return this.salesAgreementItems;
  }
  return this.salesAgreementItems.filter(obj => obj.department === this.$route.query.salesType);
}
subTitle() {
  if (!['bricks', 'mortars'].includes(this.$route.query.salesType)) {
    return 'All';
  }
  const type = this.$route.query.salesType;
  return type.charAt(0).toUpperCase() + type.subString(1);
},
title() {
  if (!['bricks', 'mortars'].includes(this.$route.query.salesType)) {
    return 'Bricks & Mortars';
  }
  const type = this.$route.query.salesType;
  return type.charAt(0).toUpperCase() + type.subString(1);
},

The last return values of the latter two computed properties could be stored in a method - e.g. toTitleCase(). And the list of sales types could be declared before the component - e.g.

const SALES_TYPES = Object.freeze(['bricks', 'mortars']);

Then that list can be referenced within the computed properties.

One option is to ensure that the sales type is in (or not in) a white list of types using Array.prototype.includes() - for example:

filteredSalesAgreementItems() {
  if (!['bricks', 'mortars'].includes(this.$route.query.salesType)) {
    return this.salesAgreementItems;
  }
  return this.salesAgreementItems.filter(obj => obj.department === this.$route.query.salesType);
}
subTitle() {
  if (!['bricks', 'mortars'].includes(this.$route.query.salesType)) {
    return 'All';
  }
  const type = this.$route.query.salesType;
  return type.charAt(0).toUpperCase() + type.subString(1);
},
title() {
  if (!['bricks', 'mortars'].includes(this.$route.query.salesType)) {
    return 'Bricks & Mortars';
  }
  const type = this.$route.query.salesType;
  return type.charAt(0).toUpperCase() + type.subString(1);
},

The last return values of the latter two computed properties could be stored in a method - e.g. toTitleCase().

if (!String.prototype.toTitleCase) {
  String.prototype.toTitleCase = function() {
    return this.charAt(0).toUpperCase() + this.subString(1);
  }
}

So then that can be used to simplify those last two computed properties - e.g.:

return this.$route.query.salesType.toTitleCase();

And the list of sales types could be declared before the component - e.g.

const SALES_TYPES = Object.freeze(['bricks', 'mortars']);

Then that list can be referenced within the computed properties.