How to make a component support a datasource item as well as being on a partial design [VueJS]

Question

I'd like to make a component reusable whether it is a standard component with a datasource item specified, or on a partial design with no datasource and so it should fall back to using the routeData fields. I was thinking something like this but the syntax isn't right:

export default {
  name: 'Hero-Test',
  components: {
    ScImage: Image,
    ScText: Text,
  },
  data() {
    if (this.$props && this.$props.fields) {
      return {};
    }
    return {
      fields: this.$jss.routeData(),
    };
  },
  methods: {},
  props: {
    fields: {
      type: Object,
      default: () => ({}),
    },
  },
};