[DRAFT] feat: configurable `<MotionGroup>` child element variants using `:config-fn` prop

[BobbieGoede]

🔗 Linked issue

• https://github.com/vueuse/motion/pull/192#issuecomment-2135877358

❓ Type of change

• [x] 📖 Documentation (updates to the documentation, readme or JSDoc annotations)
• [ ] 🐞 Bug fix (a non-breaking change that fixes an issue)
• [ ] 👌 Enhancement (improving an existing functionality like performance)
• [x] ✨ New feature (a non-breaking change that adds functionality)
• [ ] 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• [ ] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This is built on https://github.com/vueuse/motion/pull/192.

This draft can be considered a feature proposal, its usefulness can be previewed in the updated docs with the following example of how easy a staggered animation would look like:

<MotionGroup preset="slideVisibleLeft" :config-fn="(index) => ({ delay: index * 200 })">
  <section>
    <h3>Product 1</h3>
    <p>Description text</p>
  </section>
  <section>
    <h3>Product 2</h3>
    <p>Description text</p>
  </section>
  <section>
    <h3>Product 3</h3>
    <p>Description text</p>
  </section>
</MotionGroup>

Not sure about the name of the prop, still need to add tests as well, feedback is appreciated!

📝 Checklist

• [ ] I have linked an issue or discussion.
• [ ] I have added tests (if possible).
• [ ] I have updated the documentation accordingly.