Confusing behaviour of .data()

Confusing behaviour of .data()

You can read a data-* attribute with .data():

  1. $('body').attr('data-id', 1234);
  2. $('body').data('id'); //1234
But when you set it again, it always stores the old value!
  1. $('body').attr('data-id', 5678);
  2. $('body').data('id') // still 1234
I found out that I used .data() wrong and you are not supposed to do that - but still, the fact that .data() accepts attributes, but only the first time is super confusing and even caused some dumb bug in our code.
If you aren't supposed to mix .attr() and .data(), why does .data() read data-* attributes at all?