Vue组件过于复杂

Question

我正在构建一个日期范围选择器，尽管此方法可行，但我感觉到它使它变得比所需的更加复杂。有没有更优雅的书写方式？

可能使用计算值或手表吗？

<template>
	<form>
		<select  @change="rangeSelection">	         
	            <option 
	                v-for="(option, key) in rangeOptions"
	                :key="key"
	                :value="key">
	                {{option.display}}
	            </option>
	    </select>
        </form>
</template>

<script>
import moment from 'moment';

export default {
  name: 'DateRangeChooser',
  data: () => {
    return {
    	selectedRange: "last7Days",
		startDate: moment().subtract(8, 'days'),
		endDate: moment().subtract(1, 'days'),
    	rangeOptions: {
	    	last7Days: {
	    		display: 'Last 7 Days',
	    		startDate: moment().subtract(8, 'days'),
	    		endDate: moment().subtract(1, 'days')
	    	},
	    	lastWeek: {
	    		display: 'Last Week',
	    		startDate: moment().startOf('week').subtract(1, 'week'),
	    		endDate: moment().endOf('week').subtract(1, 'week')
	    	},
	    	last30days: {
	    		display: 'Last 30 days',
	    		startDate: moment().subtract(31, 'days'),
	    		endDate: moment().subtract(1, 'days')
	    	}
    	}
    }
  },  
  methods: {
  	rangeSelection: function(e){
  		this.endDate = this.rangeOptions[e.currentTarget.value].endDate;
  		this.startDate = this.rangeOptions[e.currentTarget.value].startDate;
  	}
  }
};
</script>