Q:

Vuejs bind variable in JSX with scope

I am essentially looking for something like:
<div v-for="k in keys" :key="k">
 {{ k }}
 ...
   <div v-with:myvalue="functionOf(k)">
     {{ myvalue }}
   </div>
</div>

I don't know how you would call such thing, but I can tell I have similar code in places and that could be handy.

A:

You can use the computed property to make functions that transform the values into something else. 
For example lets say you have this code here.
<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

You can add add a computed property to run some js code and just call it in the html template 
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p> //computed function
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

You can read more about it in the official documentation
Example with v-for
<div v-for="k in keys" :key="k">
 {{ k }}
   <div>
     {{ reversedMessage(k) }}
   </div>
</div>

var vm = new Vue({
  el: '#example',
  computed: {
    // a computed getter
    reversedMessage(k){ //you receive the value for each k you have in keys
      return k.split('').reverse().join('')
    }
  }
})

