problem with jsx spread operator and props passed to children components about babel-plugin-transform-vue-jsx HOT 3 CLOSED

import Posts from 'components/Posts'
import Profile from 'components/Profile'
import posts from '../../posts'

export default {
  name: 'Home',
  render (h) {
    // Set props to be passed here
    const data = {
      props: {
        posts: posts,
        msg: 'hola'
      }
    }
    return (
      <div class='page'>
        <Profile />
        <Posts {...data} />
      </div>
    )
  }
}

import Post from '../Post'

export default {
  name: 'Posts',
  props: {
    posts: Array,
    msg: String
  },
  render (h) {
    const data = {
      posts: this.posts
    }
    return (
      <div>
        {
          data.posts.map((post, index) =>
            <Post key={index}
              // {...post} doesn't work
              author={post.author}
              title={post.title}
              tags={post.tags}
              date={post.date}
            />
          )
        }
      </div>
    )
  }
}

export default {
  name: 'Post',
  props: {
    author: String,
    date: String,
    tags: Array,
    title: String
  },
  render (h) {
    const data = {
      author: this.author,
      date: this.date,
      tags: this.tags,
      title: this.title
    }
    return (
      <div>
        <h1>{data.title}</h1>
        <h2>{data.author}</h2>
        <h3>{data.date}</h3>
        {data.tags.map((tag, i) => <h5 key={i}>{tag}</h5>)}
      </div>
    )
  }
}