title: How to use dynamic prop type in Vue 3 script setup using defineprop and interface
body: <p>I'm creating a component that takes in an array of data (using typed props based on an interface) and then pass in a second prop that dynamically selects the the property I'd like to reference in the data object.</p>
  <p>I'm using Vue 3 script setup syntax with Typescript and defineProps.</p>
  <pre class="lang-js prettyprint-override"><code>&lt;script setup lang=&quot;ts&quot;&gt;
  interface DataRow {
     'id': number
     'height': number
     'strideLength': number
     'distanceTravelled': number
     'timestamp': Date
  }
  
  const props = defineProps&lt;{
     data: DataRow[]
     xAxis: string 
     yAxis: string
  }&gt;
  &lt;/script&gt;
  
  &lt;template&gt;
  X Axis: {{ props.data[xAxis] }}
  Y Axis: {{ props.data[YAxis] }}
  &lt;pre&gt;
  {{ data }}
  &lt;/pre&gt;
  &lt;/template&gt;
  </code></pre>
  <p>I'm trying to pass in one of the interface properties so that I can dynamically select what I'm displaying on the x/y axis of a plot. Currently, I'm using a string but I'm getting linter errors given that it's untyped.</p>
  <pre class="lang-js prettyprint-override"><code>const props = defineProps&lt;{
     data: DataRow[]
     xAxis: string  &lt;- this should only be properties of my DataRow interface
     yAxis: string &lt;- this should only be properties of my DataRow interface
  }&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>&lt;my-component
  :data=&quot;[{id: 1, height: 2, strideLength: 0.5, distanceTravelled: 5, timestamp: new Date()}]&quot;
  :xAxis=&quot;timestamp&quot;
  :yAxis=&quot;height&quot; /&gt;
  </code></pre>
  <p>Is there a better way of doing this?</p>